AutoComplete in jQuery with dynamically added elements

Question

My requirement is to show few options when user input some characters (minimum 3) in one of input field which might be added dynamically too.

I can not load data at page loading at beginning because data is huge. There is an ajax call to get that filtered data.

The issue what I am getting is Expected identifier error on page loading at line# 2. So, could you please tell what is wrong with the below code?

$(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 another approach: initialize the autocomplete when you create the 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

The method where I am adding new input field there writing below 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 which will be used to all other (static) input fields below code is 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 input fields, AutoComplete code of addInput() function will be called.

Thanks to @Salman and this post Enabling jQuery Autocomplete on dynamically created input fields to give me an idea.

Answer 3

Try this.

  $("#autocompleteElement").autocomplete({
        source:function (data, response) {

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

        }
    });

This code based on jquery UI autocomplete.