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
            });

Shorn

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

Surcease

Hey, Thanks a lot @Salman. I did the same approach. Forgot to post my answer here. I am doing autocomplete at the time of adding my new input field. Thanks again. – Shorn

@Salman A: I wanna add data to json dynamically by call a PageMethod. The result is data (that use for autocomplete function). How can I ? Thanks. – Olav

$input is undefined coming – Sekyere

Well done, the idea of creating a variable with the autocomplete options is helpful to control many autocompletes (especially different types on the same page) Thanks @Salman – Lacewing

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.

Shorn

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.

Hbeam

I was using this earlier. But the problem is, this will not work for elements those will added after page load like Dynamically. It works for static elements. – Shorn

You can apply same code for your dynamic element. Replace the selector with your dynamic element. – Hbeam