In jQuery sortable dynamic input fields, after selection of jQuery autocomplete, show the label, not the value

Question

With jQuery, I have made an Add new filed button, that adds an input field on click. I also have assigned autocomplete for the input field.

But the problem is, autocomplete is working only for the first field, not for the dynamically added fields. And also, after selecting any of the options, how can I show the label of the option, not its value?

I have been looking for the way of solving this problem for a while, but have not got the correct explanation. It'll be very helpful if you can suggest me how this can be solved. Thanks in advance for your suggestion.

 $(document).ready(function() { var fixHelperModified = function(e, tr) { var $originals = tr.children(); var $helper = tr.clone(); $helper.children().each(function(index) { $(this).width($originals.eq(index).width()) }); return $helper; }, updateIndex = function() { $('td.index').each(function(i) { $(this).html(i + 1); }); }; $("#sort tbody").sortable({ helper: fixHelperModified, stop: updateIndex }).disableSelection(); $("#addNew").click(function() { $('#add').append("<tr class='rem'><td class='index'>1</td><td><input id='author-search'><button class='delete'>Delete</button></td></tr>"); updateIndex(); }); $("body").on('click', '#add .delete', function() { $(this).closest(".rem").remove(); updateIndex(); }); }); $("#author-search").autocomplete({ source: [{ label: "Tom Smith", value: "1234" }, { label: "Tommy Smith", value: "12321" }], minLength: 3, select: function(event, ui) { event.preventDefault(); $(this).val(ui.item.value); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <table id="sort" class="grid"> <button id='addNew'>Add new field</button> <thead> <tr><th class="index">No.</th><th>Author</th></tr> </thead> <tbody id="add"> <tr class="rem"><td class="index">1</td><td><input id="author-search"><button class="delete">Delete</button></td></tr> </tbody> </table> 

Answer 1

Here is an example based on your code. This makes unique IDs and applies Autocomplete to each new field.

 $(function() { var fixHelperModified = function(e, tr) { var $originals = tr.children(); var $helper = tr.clone(); $helper.children().each(function(index) { $(this).width($originals.eq(index).width()) }); return $helper; }, updateIndex = function() { $('td.index').each(function(i) { $(this).html(i + 1); }); }, makeAutocomplete = function($item) { $item.autocomplete({ source: [{ label: "Tom Smith", value: "1234" }, { label: "Tommy Smith", value: "12321" }], minLength: 3, select: function(event, ui) { event.preventDefault(); $item.val(ui.item.value); } }); }; $("#sort-1 tbody").sortable({ helper: fixHelperModified, stop: updateIndex }).disableSelection(); $("#addNew-1").click(function() { var c = $("#add tr").length; c++; $('#add').append("<tr class='rem'><td class='index'>" + c + "</td><td><input id='author-search-" + c + "'><button class='delete'>Delete</button></td></tr>"); updateIndex(); makeAutocomplete($("#author-search-" + c)); }); $("body").on('click', '#add .delete', function() { $(this).closest(".rem").remove(); updateIndex(); }); makeAutocomplete($("#author-search-1")); }); 

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <table id="sort-1" class="grid"> <button id='addNew-1'>Add new field</button> <thead> <tr> <th class="index">No.</th> <th>Author</th> </tr> </thead> <tbody id="add"> <tr class="rem"> <td class="index">1</td> <td><input id="author-search-1"><button class="delete">Delete</button></td> </tr> </tbody> </table>