We Keep Coding

how to create a search feature without clicking the search button?

how to create a search feature without clicking the search button? so when entering a value then enter can immediately bring up the search results.
index.blade.php
<div class="input-group col-10">
<input type="text" class="form-control search-bar" id="search-bar" placeholder="Type to search course">
<div class="input-group-append">
<button class="btn btn-primary form-control btn-search">Search</button>
</div>
</div>
index_script.blade.php
$(".btn-search").click(function() {
$(".see-more").click();
$(".see-more").remove();
var value = $(".search-bar").val().toLowerCase();
$(".course-item").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
});
$(".owl-item").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
});
$.each($("#ajar-catalog-container .owl-stage"), function() {
var count = 0;
$.each($(this).children('.owl-item'), function() {
display = $(this).children().css('display');
if (display == 'block') {
count++;
}
});
if(count == 0) {
$(this).closest('.card').css('display', 'none');
}
else {
$(this).closest('.card').css('display', 'block');
}
});
});
please help, thank you

just manually trigger the click event of the button element.
$("#search-bar").keydown(function(e){
if (e.keyCode == 13) {
$(".btn-search").click();
}
});

Method #1
You can use the oninput event in JavaScript to get the results when entering a value to the input field.
var searchInput = document.getElementById("search-bar")
searchInput.oninput = function(){
// put your logic for search filter here
}
<div class="input-group col-10">
<input type="text" class="form-control search-bar" id="search-bar" placeholder="Type to search course">
<div class="input-group-append">
<button class="btn btn-primary form-control btn-search">Search</button>
</div>
</div>
Method #2 -
You can use jQuery's keydown() event
$("#search-bar").keydown(function(){
// your logic here
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group col-10">
<input type="text" class="form-control search-bar" id="search-bar" placeholder="Type to search course">
<div class="input-group-append">
<button class="btn btn-primary form-control btn-search">Search</button>
</div>
</div>

Html Form doesnt submit after append with jquery

I append HTML form with jquery append function but when I click on submit button it doesn't submit
$( "body" ).on( "click", "#addPackage", function() {
packageId = 'package'+ id;
id = id+1;
$('.table tbody').append('<tr id="' + packageId + '"> <form class="" onsubmit="editPackage();return false;" method="post"><td><input type="text" name="package_name" value="" /></td><td><input type="text" name="package_price" value="" /></td><td><input type="text" name="package_details" value="" /></td><td><button class="btn btn-success" ><i class="fa fa-save"></i></button> <span class="btn btn-danger remove-btn"><i class="fa fa-remove"></i></span></td></form></tr>');
});

This is what you probably want, instead of use <form> (which only execute function editPackage) in <tr> (and it is incorrect was what mentioned in Justinas comment ) you can execute editPackage after click on row-button and read data fro row in this way (i remove <form> from your append string and change <button>):
let id=0;
$( "body" ).on( "click", "#addPackage", function() {
packageId = 'package'+ id;
id = id+1;
//console.log($('.table tbody'));
$('.table tbody').append('<tr id="' + packageId + '"> <td><input type="text" name="package_name" value="" /></td><td><input type="text" name="package_price" value="" /></td><td><input type="text" name="package_details" value="" /></td><td><button class="btn btn-success" onclick="editPackage(this)">submit<i class="fa fa-save"></i></button> <span class="btn btn-danger remove-btn"><i class="fa fa-remove"></i></span></td></tr>');
});
function editPackage(btn) {
let tds =btn.parentNode.parentNode.children
let v1=tds[0].children[0].value;
let v2=tds[1].children[0].value;
let v3=tds[2].children[0].value;
console.log('submit', v1, v2, v3);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="addPackage">add</button>
<table class="table"><tbody></tbody><table>

Keyup not working for dynamically added input-groups

I have already gone through questions available on this topic and have tried everything, but still my keyup function is not working.
$(document).ready(function() {
$(document).on('keyup', '.pollOption', function() {
var empty = false;
$(".pollOption").each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$("#cpsubmit").attr('disabled', 'disabled');
$("#moreop").attr('disabled', 'disabled');
} else {
$("#cpsubmit").removeAttr('disabled');
$("#moreop").removeAttr('disabled');
}
});
//Keep Track of no. of options on the page
var noOfOptions = 2;
// Function to add input fields (since I may have to delete them I've use bootstrap's input-groups, I guess this is causing issue)
$("#moreop").on('click', function() {
noOfOptions++;
$("#options").append("<div class='input-group pollOption'><input class='form-control' type='text' placeholder='New Option' name='op" + noOfOptions + "'/><span class='input-group-addon'><a href='#' id='removeOption' class='text-danger'>Remove</a></span></div>");
});
// To delete any option (only the dynamically created options can be deleted)
$("#cpform").on('click', '#removeOption', function() {
$(this).parents('.input-group').remove();
noOfOptions--;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="cpform" method="POST" action="/polls/add">
<div class="form-group">
<label>Title</label>
<input id="title" type="text" placeholder="Ask your question here..." name="title" class="form-control" />
</div>
<div id="options" class="form-group">
<label>Options</label>
<input type="text" placeholder="Option 1" name="op1" class="form-control pollOption" />
<input type="text" placeholder="Option 2" name="op2" class="form-control pollOption" />
</div>
<button id="moreop" type="button" disabled="disabled" class="btn btn-outline-info btn-primary">More Options</button><br/><br/>
<button id="cpsubmit" type="submit" disabled="disabled" class="btn btn-info btn-primary">Submit</button>
</form>
This code works perfectly for the two inputs already in the HTML part.
When I click on the "More Option" button the new field gets added but the "keyup" does not work on it. In fact, when I enter something on the new added inputs then my "More Option" & "Submit" button gets disabled (really do't know why this is happening).

You've to add the class pollOption to the input and not the div in your append :
$("#options").append("<div class='input-group'><input class='pollOption form-control' ...
_____________________________________________________________^^^^^^^^^^
Instead of :
$("#options").append("<div class='input-group pollOption'><input class='form-control' ...
______________________________________________^^^^^^^^^^
Demo:
$(document).ready(function() {
$(document).on('keyup', '.pollOption', function() {
var empty = false;
$(".pollOption").each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$("#cpsubmit").attr('disabled', 'disabled');
$("#moreop").attr('disabled', 'disabled');
} else {
$("#cpsubmit").removeAttr('disabled');
$("#moreop").removeAttr('disabled');
}
});
//Keep Track of no. of options on the page
var noOfOptions = 2;
// Function to add input fields (since I may have to delete them I've use bootstrap's input-groups, I guess this is causing issue)
$("#moreop").on('click', function() {
noOfOptions++;
$("#options").append("<div class='input-group'><input class='pollOption form-control' type='text' placeholder='New Option' name='op" + noOfOptions + "'/><span class='input-group-addon'><a href='#' id='removeOption' class='text-danger'>Remove</a></span></div>");
$(this).attr('disabled','disaled');
});
// To delete any option (only the dynamically created options can be deleted)
$("#cpform").on('click', '#removeOption', function() {
$(this).parents('.input-group').remove();
noOfOptions--;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="cpform" method="POST" action="/polls/add">
<div class="form-group">
<label>Title</label>
<input id="title" type="text" placeholder="Ask your question here..." name="title" class="form-control" />
</div>
<div id="options" class="form-group">
<label>Options</label>
<input type="text" placeholder="Option 1" name="op1" class="form-control pollOption" />
<input type="text" placeholder="Option 2" name="op2" class="form-control pollOption" />
</div>
<button id="moreop" type="button" disabled="disabled" class="btn btn-outline-info btn-primary">More Options</button><br/><br/>
<button id="cpsubmit" type="submit" disabled="disabled" class="btn btn-info btn-primary">Submit</button>
</form>

Repopulate form input after delete another field

Good day, i have this section of javascript that's causing me trouble
https://jsfiddle.net/o5x8qgvt/2/
When i add a new field the position gets incremented when i delete a field the position is repopulated but on product name it doesn't repopulate the fields it gives me blank even if i added data in each of them. Can you please help me out?
Javascript:
// setup an "add a tag" link
var $addTagLink = $('<button href="#" class="btn btn-info add_tag_link">Adauga Produs</button>');
$('.form-buttons > .btn-group').prepend($addTagLink);
var $newLinkLi = $('.append-me');
jQuery(document).ready(function() {
// Get the ul that holds the collection of product-group
var $collectionHolder = $('#products-group');
// add the "add a tag" anchor and li to the product-group ul
$collectionHolder.append($newLinkLi);
// count the current form inputs we have (e.g. 2), use that as the new
// index when inserting a new item (e.g. 2)
$collectionHolder.data('index', $collectionHolder.find(':input').length);
$addTagLink.on('click', function(e) {
// prevent the link from creating a "#" on the URL
e.preventDefault();
// add a new tag form (see code block below)
addTagForm($collectionHolder, $newLinkLi);
typeInitialize();
});
});
function regenerateTagList() {
var vals = $('.product-group > .product-counter > input').toArray().map(function(v, i) {return v.value;});
var products = $('.product-group > .product-name > span > input:last').toArray().map(function(v, i) {return v.value;});
console.log(products);
$('.product-group').remove();
$('#products-group').data('index', 1);
for (var i = 0; i < vals.length; i++) {
if (vals[i] !== i + 1) {
vals[i] = i + 1;
}
addTagForm($('#products-group'), $newLinkLi);
typeInitialize();
$('.product-group > .product-counter > input:last').val(vals[i]);
$('.product-group > .product-name > span > input:last').val(products[i]);
}
}
function addTagForm($collectionHolder, $newLinkLi) {
// Get the data-prototype explained earlier
var prototype = $collectionHolder.data('prototype');
// get the new index
var index = $collectionHolder.data('index');
if (index === 0) {
index = 1;
}
// Replace '$$name$$' in the prototype's HTML to
// instead be a number based on how many items we have
var newForm = prototype.replace(/__name__/g, index);
// increase the index with one for the next item
$collectionHolder.data('index', index + 1);
// Display the form in the page in an li, before the "Add a tag" link li
var $newFormLi = $('<tr class="product-group"></tr>').append(newForm);
// also add a remove button, just for this example
//$('<button type="button" class="product-highlight btn btn-primary">Highlight</button>
// <button type="button" class="remove-tag btn btn-primary">Sterge</button>').appendTo($newFormLi);
$newLinkLi.append($newFormLi);
// handle the removal, just for this example
$('.remove-tag').click(function(e) {
e.preventDefault();
$(this).closest('tr').remove();
regenerateTagList();
return false;
});
$('.product-highlight').on('click', function(e) {
e.preventDefault();
$(this).closest('tr').toggleClass('toggle-highlight');;
});
}
// Initialize Typeahead
function typeInitialize() {
// Create typeahead instance
var url = Routing.generate('offer_ajax_search', {
name: 'WILDCARD'
});
// Trigger typeahead + bloodhound
var products = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
identify: function(obj) {
console.log('fired');
return obj.u_name;
},
prefetch: '/export/json/products.json',
remote: {
url: url,
wildcard: 'WILDCARD',
}
});
products.initialize();
$('.product-group').find('.typeahead:last').typeahead({
minLength: 3,
highlight: true,
limit: 10,
}, {
name: 'product',
display: 'u_name',
source: products.ttAdapter()
}).on('typeahead:select', function(e, datum) {
e.preventDefault();
/* Act on the event */
var information = '<div class="col-md-2"><label for="boxCode" class="label-control">BEX Code</label><input class="form-control" type="text" disabled="true" value="' + datum.u_bexCode + '"/></div>';
information += '<div class="col-md-2"><label for="base-price">Pret de baza</label><input class="form-control " type="text" disabled="true" value="' + datum.u_image + '"/></div>';
var div = $(this).parent().closest('.form-group').find('.product-information');
$(div).empty().append(information);
}).on('typeahead:autocomplete', function(e, datum) {
e.preventDefault();
/* Act on the event */
var information = '<div class="col-md-2"><label for="boxCode" class="label-control">BEX Code</label><input class="form-control" type="text" disabled="true" value="' + datum.u_bexCode + '"/></div>';
information += '<div class="col-md-2"><label for="base-price">Pret de baza</label><input class="form-control " type="text" disabled="true" value="' + datum.u_image + '"/></div>';
var div = $(this).parent().closest('.form-group').find('.product-information');
$(div).empty().append(information);
});
$("input[type='text']").on("click", function() {
$(this).select();
});
}
HTML:
<div class="row">
<div class="col-md-12">
<form name="offer" method="post" action="/app_dev.php/offer-generator/new/submited" class="form-horizontal">
<div class="form-group"><label class="col-sm-2 control-label required" for="offer_name">Name</label><div class="col-sm-10"><input type="text" id="offer_name" name="offer[name]" required="required" maxlength="255" class="form-control"></div>
</div>
<div id="products-group" data-prototype="<td class="product-counter col-md-1"><input type="text" id="offer_products___name___position" name="offer[products][__name__][position]" disabled="disabled" required="required" class="counter form-control" value="__name__" /></td>
<td class="product-name"><input type="text" id="offer_products___name___name" name="offer[products][__name__][name]" required="required" class="typeahead product form-control" name="product" id="products" data-provider="product" placeholder="Nume Produs" autocomplete="false" /></td>
<td class="col-md-1"><input type="text" id="offer_products___name___price" name="offer[products][__name__][price]" required="required" class="form-control" /></td>
<td class="col-md-1"><input type="text" id="offer_products___name___quantity" name="offer[products][__name__][quantity]" required="required" class="form-control" /></td>
<td class="product-action">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="product-highlight btn btn-warning">Highlight</button>
<button type="button" class="remove-tag btn btn-danger">delete</button>
</div>
</td>
"><table class="table table-striped table-hover table-bordered append-me">
<thead>
<tr>
<th class="col-md-1">Position</th>
<th>Product</th>
<th class="col-md-1">Price</th>
<th class="col-md-1">Quantity</th>
<th class="col-md-2">Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table></div>
</form></div>
<div class="form-buttons">
<div class="btn-group" role="group" aria-label="..."><button href="#" class="btn btn-info add_tag_link">Add Product</button>
<button type="submit" id="offer_save" name="offer[save]" class="btn-default btn">Create Offer</button>
<button type="submit" id="offer_send_email" name="offer[send_email]" class="btn-default btn">Send Email</button>
<button type="submit" id="offer_export_excel" name="offer[export_excel]" class="btn-default btn">Export Excel</button>
<button type="submit" id="offer_export_pdf" name="offer[export_pdf]" class="btn-default btn">Export PDF</button>
</div>
</div>
<div class="form-group"><div class="col-sm-2"></div><div class="col-sm-10"><div id="offer_products" data-prototype="<div class="form-group"><label class="col-sm-2 control-label required">__name__label__</label><div class="col-sm-10"><div id="offer_products___name__"><div class="form-group"><label class="col-sm-2 control-label required" for="offer_products___name___pricePerLine">Line Total</label><div class="col-sm-10"><input type="text" id="offer_products___name___pricePerLine" name="offer[products][__name__][pricePerLine]" required="required" class="form-control" /></div>
</div></div></div>
</div>"></div></div>
</div><input type="hidden" id="offer__token" name="offer[_token]" class="form-control" value="cSVdt50kupA_BwFeY4T43PslnfjiA-UgjT4EA_HBdqs">
</div>

JavaScript doesn't see/won't use other JavaScript

HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="../../assets/js/bootstrap.min.js"></script>
<script src="../../assets/js/autocomplete_tyres.js"></script>
<script src="../../assets/js/autocomplete_client.js"></script>
<!-- Turn on tooltips -->
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
<!-- /Turn on tooltips -->
</head>
<body>
<?php include_once('../../libs/navbar.php');
$page = __FILE__; ?>
<div class="container-fluid">
<div class="row">
<?php include_once('../../libs/sidebar.php'); ?>
<div class="col-md-10 body-main"><!-- container body-main -->
<form action="../../libs/orders/exec_add.php" method="POST" onsubmit="return confirm('Jesteś pewny, że podane dane są prawidłowe i chcesz wysłać zamówienie?');"><!-- form oder add -->
<div class="row">
<div id="products" class="col-md-12 form-group">
<h4>Produkty</h4>
<div class="col-md-2 form-group">
<input onclick="select()" type="text" class="form-control" placeholder="Identyfikator opony" name="tyreID[]" id="tyreID">
<input onclick="select()" type="text" class="tyreSize form-control" placeholder="Rozmiar" name="tyreSize[]" id="tyreSize" required>
<input onclick="select()" type="text" class="tyreManufacturer form-control" placeholder="Producent" name="tyreManufacturer[]" id="tyreManufacturer" required>
<input onclick="select()" type="text" class="tyreTread form-control" placeholder="Bieżnik" name="tyreTread[]" id="tyreTread" required>
<input onclick="select()" type="text" class="form-control" placeholder="DOT" name="tyreDOT[]" id="tyreDOT">
<input onclick="select()" type="number" class="form-control" placeholder="Ilość sztuk" name="numberPieces[]" id="numberPieces" required>
<input onclick="select()" type="number" class="form-control" placeholder="Cena za sztukę" name="pricePiece[]" id="pricePiece" required>
<button type="button" id="btnAddProduct" class="btn btn-success" data-toggle="tooltip" data-placement="right" title="Dodaj inny rozmiar opony"><i class="fa fa-plus"></i> Dodaj</button>
</div>
</div>
<script src="../../assets/js/addproductbox.js"></script>
</div>
addproductbox.js
$(document).ready(function() {
var max_fields = 6; //maximum input boxes allowed
var wrapper = $("#products"); //Fields wrapper
var add_button = $("#btnAddProduct"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
if(x < max_fields) { //max input box allowed
x++; //text box increment
$(wrapper).append('<div class="col-md-2 form-group">' +
'<input onclick="select()" type="text" class="form-control" placeholder="Identyfikator opony" name="tyreID[]" id="tyreID">' +
'<input onclick="select()" type="text" class="tyreSize form-control" placeholder="Rozmiar" name="tyreSize[]" id="tyreSize" required>' +
'<input onclick="select()" type="text" class="tyreManufacturer form-control" placeholder="Producent" name="tyreManufacturer[]" id="tyreManufacturer" required>' +
'<input onclick="select()" type="text" class="tyreTread form-control" placeholder="Bieżnik" name="tyreTread[]" id="tyreTread" required>' +
'<input onclick="select()" type="text" class="form-control" placeholder="DOT" name="tyreDOT[]" id="tyreDOT">' +
'<input onclick="select()" type="number" class="form-control" placeholder="Ilość sztuk" name="numberPieces[]" id="numberPieces" required>' +
'<input onclick="select()" type="number" class="form-control" placeholder="Cena za sztukę" name="pricePiece[]" id="pricePiece" required>' +
'<button href="#" class="btn btn-danger remove_field"><i class="fa fa-times"></i> Usuń</button>' +
'</div>'); //add input box
}
});
$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
x--;
})
});
autocomplete_tyres.js
$(function() {
var tyreSizes = [
"10.00 R15",
"10.00-20",
"10.5-20",
"10R17.5",
"10R20",
"10R202",
"10R22,5",
"10R30",
"10R40",
"10R50",
"10R60",
"11 R 24,5",
"11.00 R20",
"11/70R22,5",
];
$(".tyreSize").autocomplete({
source: tyreSizes
});
var tyreManufacturers = [
"Accelera",
"Achilles",
"Admiral",
"Alpha",
"Ambassador",
"America",
"Amtel",
"Anli",
"Antarktika",
"Arctic",
"Arktic",
"Arrowspeed",
"Aurora",
"Autogrip",
"Avon",
"Axxium",
"Bargum",
"Bar-gum",
"Barum",
"Bd",
"Beep",
"Berliner",
"BFGoodrich",
"Black howk",
"Bridgestone",
];
$(".tyreManufacturer").autocomplete({
source: tyreManufacturers
});
var tyreTreads = [
"60",
"65",
"190",
"202",
"330",
"350",
"380",
"620",
"660",
"2000",
"3000",
"4000",
"42067",
"...V71",
"165/80R14",
"185/60R14",
"185/70R14",
"190 DIREZIONALE",
"190 SNOW SPORT WINTER",
"190 V-CT22",
"195/65R15",
"2000 + T 70",
"2000 SPORT",
"2000 T 70",
"2000 T 80",
"2000 T65",
"2000 T80",
"2000DS165",
"2001 PERFORMANCE",
"200T80",
"210 SNOW SPORT WINTER",
"210SNOW SPORT",
];
$(".tyreTread").autocomplete({
source: tyreTreads
});
});
So the code in HTML is just simple order to make. On start you get one div with few inputs and few have autocomplete helping my coworkers choose tyreSize, tyreManufacturer and tyreTread. First div which is added in HTML file have working autocomplete but the others added dynamicaly with jQuery shows up with autocomplete not working in it. Some1 is up for help?
SOLVED:
Enabling jQuery Autocomplete on dynamically created input fields

SOLVED: Enabling jQuery Autocomplete on dynamically created input fields