Autocomplete in jQuery with dynamically added elements

Question

My requirement is to show several options when the user enters some characters (at least 3) in one of the input fields that can be added dynamically.

I cannot load data when loading a page at the beginning, because the data is huge. There is an ajax call to get the filtered data.

The problem I get is the Expected identifier error when loading the page on line # 2. So, could you tell me what is wrong with the code below?

 $(document).on('keydown.autocomplete', 'input.searchInput', function() { source: function (request, response) { // Line # 2 var id = this.element[0].id; var val = $("#"+id).val(); $.ajax({ type : 'Get', url: 'getNames.html?name=' + val, success: function(data) { var id = $(this).attr('id'); $(this).removeClass('ui-autocomplete-loading'); response(data); },error: function(data) { $('#'+id).removeClass('ui-autocomplete-loading'); } }); }, minLength: 3 }); 

Answer 1

How about using a different approach: initialize autocomplete when creating input:

 $(function() { // settings for each autocomplete var autocompleteOptions = { minLength: 3, source: function(request, response) { $.ajax({ type: "GET", url: "getNames.html", data: { name: request.term }, success: function(data) { response(data); } }); } }; // dynamically create an input and initialize autocomplete on it function addInput() { var $input = $("<input>", { name: "search", "class": "searchInput", maxlength: "20" }); $input .appendTo("form#myForm") .focus() .autocomplete(autocompleteOptions); }; // initialize autocomplete on first input $("input.searchInput").autocomplete(autocompleteOptions); $("input#addButton").click(addInput); }); 

 <form id="myForm" name="myForm" method="post"> <input id="addButton" type="button" value="Add an input" /> <input name="search" class="searchInput" maxlength="20" /> </form> 

jsFiddle with AJAX

Answer 2

Try it.

  $("#autocompleteElement").autocomplete({ source:function (data, response) { $ajax({ url:'your/url?name='+data.term, success:function(data){ response(data); } }) } }); 

This code is based on jquery user interface autocomplete.

Answer 3

The method in which I add a new input field, written below the code.

  function addInput(){ // Code to append new input filed next to existing one. $("table").find('input[id=clientId]:last').autocomplete({ source: function (request, response) { var id = this.element[0].id; var val = $("#"+id).val(); $.ajax({ type : 'Get', url: 'getName.html?name=' + val, success: function(data) { var id = $(this).attr('id'); $(this).removeClass('ui-autocomplete-loading'); response(data); }, error: function(data) { $('#'+id).removeClass('ui-autocomplete-loading'); } }); }, minLength: 3 }); } 

And some where in other js that will be used for all other (static) input fields under the code are used.

  jQuery("input.searchInput").autocomplete({ source: function (request, response) { var id = this.element[0].id; var val = $("#"+id).val(); $.ajax({ type : 'Get', url: 'getName.html?name=' + val, success: function(data) { var id = $(this).attr('id'); $(this).removeClass('ui-autocomplete-loading'); response(data); }, error: function(data) { $('#'+id).removeClass('ui-autocomplete-loading'); } }); }, minLength: 3 }); 

Note. - For any autocomplete requests in dynamically added inputs, the autocomplete function addInput () will be called.

Thanks @Salman and this post Enabling jQuery autocomplete in dynamically generated input fields to give me an idea.