jquery auto complete for dynamically generated textboxes not working
ajax, jquery, json
Solution
Check this Working Fiddle Demo.
JS
bindAutoComplete('inputs');
$("#AddMore").click(function () {
$("#maintable").each(function () {
var tds = '<tr>';
jQuery.each($('tr:last td', this), function () {
tds += '<td>' + $(this).html() + '</td>';
});
tds += '</tr>';
if ($('tbody', this).length > 0) {
$('tbody', this).append(tds);
bindAutoComplete('inputs');
$("#delete").fadeIn('200');
}
else {
$(this).append(tds);
bindAutoComplete('inputs');
}
});
});
function bindAutoComplete(classname){
$("."+classname).autocomplete({
source: function (request, response) {
$.ajax({
url: '/Admin/Ticket/GetPart',
type: "GET",
dataType: "json",
data: { term: request.term },
success: function (data) {
if (data != null) {
if (data.length > 0) {
response($.map(data, function (item) {
return { label: item.PartNumber, value: item.PartNumber };
}))
}
else {
response([{ label: 'No results found.' }]);
}
}
}
})
},
});
}
After appending input elements call `bindAutoComplete('inputs')`
HTML - Add classname, for example: `class="inputs"` to `<input>` tags.
<input type="text" class="inputs" name="abcd" class="PartNumber23" style="width:130px;" />
Problem
i can't do autocomplete on dynamically generated textboxes, i have searched internet but couldn't found any solution. i'm sharing what i have done so far: JQUERY: ``` function bindAutoComplete(classname) { $("." + classname).autocomplete({ source: function (request, response) { $.ajax({ url: '/Admin/Ticket/GetPart', type: "GET", dataType: "json", data: { term: request.term }, success: function (data) { if (data != null) { if (data.length > 0) { response($.map(data, function (item) { return { label: item.PartNumber, value: item.PartNumber }; })) } else { response([{ label: 'No results found.' }]); } } } }) }, }); } // fetch part number $(document).ready(function () { $("#PartNumber23").autocomplete({ source: function (request, response) { $.ajax({ url: '/Admin/Ticket/GetPart', type: "GET", dataType: "json", data: { term: request.term }, success: function (data) { if (data != null) { if (data.length > 0) { response($.map(data, function (item) { return { label: item.PartNumber, value: item.PartNumber }; })) } else { response([{ label: 'No results found.' }]); } } } }) }, }); $('#PartNumber23').keyup(function () { var errormsg = ""; var amount = $('#PartNumber23').val(); $.ajax({ type: "GET", url: '/Admin/Ticket/GetPart', data: { 'term': amount }, dataType: "json", success: function (data) { if (data != null) { if (data.length > 0) { $('#Manufacturer').val(data[1].Manufacturer); $('#DateCode').val(data[0].DateCode); $('#Package').val(data[0].PackageCase); $('#buyingprice').val(data[0].Price); } else { $('#Manufacturer').val(''); $('#DateCode').val(''); $('#Package').val(''); $('#buyingprice').val(''); } } }, error: function (jqXHR, exception) { $('#error').html(jqXHR) } }); }); }) var key = function () { var errormsg = ""; var amount = $('#buyingprice').val(); $.ajax({ type: "POST", url: "/Admin/Ticket/ConvertCurrency", data: "{amount:" + amount + "}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { $('#bpusd').val(data); }, error: function (jqXHR, exception) { // $('#error').html("Primitive Functions not allowed.") } }); } var key2 = function () { var errormsg = ""; var amount = $('#customprice').val(); $.ajax({ type: "POST", url: "/Admin/Ticket/ConvertCurrency", data: "{amount:" + amount + "}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { $('#amtusd').val(data); }, error: function (jqXHR, exception) { // $('#error').html("Primitive Functions not allowed.") } }); } $(document).ready(function () { $('#PartNumber23').keyup(key); $('#buyingprice').keyup(key); $('#customprice').keyup(key2); $('#Quantity').keyup(function () { var qty = $('#Quantity').val(); $('#CustomQuantity').val(qty); }) }) $("#AddMore").click(function () { $("#maintable").each(function () { var tds = '<tr>'; jQuery.each($('tr:last td', this), function () { tds += '<td>' + $(this).html() + '</td>'; }); tds += '</tr>'; if ($('tbody', this).length > 0) { $('tbody', this).append(tds); $("#delete").fadeIn('200'); } else { $(this).append(tds); } }); bindAutoComplete('inputs') }); ``` HTML: ``` <table id="maintable"> <thead> <tr> <th> Part No </th> <th> MFG </th> <th> DC </th> <th> PKG </th> <th> QTY. Need </th> <th> QTY. Offer </th> <th> BP </th> <th> BP(USD) </th> <th> AMT (USD) </th> <th> LT Days </th> <th> Desc </th> <th> Note </th> </tr> </thead> <tbody> <tr> <td> <input class="inputs" type="text" name="abcd" id="PartNumber23" style="width:130px;" /> </td> <td> <input class="text-box single-line" id="Manufacturer" name="Manufacturer" type="text" value="" /> <span class="field-validation-valid" data-valmsg-for="Manufacturer" data-valmsg-replace="true"></span> </td> <td> <input class="text-box single-line" id="DateCode" name="DateCode" type="text" value="" /> <span class="field-validation-valid" data-valmsg-for="DateCode" data-valmsg-replace="true"></span> </td> <td> <input class="text-box single-line" id="Package" name="Package" type="text" value="" /> <span class="field-validation-valid" data-valmsg-for="Package" data-valmsg-replace="true"></span> </td> <td> <input class="text-box single-line" data-val="true" data-val-number="The field Quantity must be a number." data-val-required="The Quantity field is required." id="Quantity" name="Quantity" style="width:35px;" type="number" value="" /> <span class="field-validation-valid" data-valmsg-for="Quantity" data-valmsg-replace="true"></span> </td> <td> <input class="text-box single-line" id="CustomQuantity" name="CustomQuantity" style="width:35px;" type="text" value="" /> <span class="field-validation-valid" data-valmsg-for="CustomQuantity" data-valmsg-replace="true"></span> </td> <td> <input class="text-box single-line" id="buyingprice" name="BuyingPrice" type="text" value="" /> <span class="field-validation-valid" data-valmsg-for="BuyingPrice" data-valmsg-replace="true"></span> </td> <td> <input id="bpusd" name="ConvertedBP" readonly="readonly" type="text" value="" /> <span class="field-validation-valid" data-valmsg-for="ConvertedBP" data-valmsg-replace="true"></span> </td> <td> <input id="amtusd" name="ConvertedAmount" readonly="readonly" type="text" value="" /> <span class="field-validation-valid" data-valmsg-for="ConvertedAmount" data-valmsg-replace="true"></span> <span id="error" class="error"></span> </td> <td> <input id="LTDays" name="LTDays" type="text" value="" /> <span class="field-validation-valid" data-valmsg-for="LTDays" data-valmsg-replace="true"></span> </td> <td> <select class="drop" id="Description" name="Description"><option>Original ROHS</option> <option>ROHS Compliance</option> </select> <span class="field-validation-valid" data-valmsg-for="Description" data-valmsg-replace="true"></span> </td> <td> <textarea class="txtarea text-box multi-line" id="Note" name="Note" placeholder="Any Note With Ticket"> </textarea> <span class="field-validation-valid" data-valmsg-for="Note" data-valmsg-replace="true"></span> </td> </tr> </tbody> </table> ``` i have replace the id with class but autocomplete only works on already present textboxes not with dynamic textbox