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

score 5 · Accepted Answer · answered Oct 29 '15 at 13:19

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

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. — Jaikrat, Oct 29 '15 at 14:48
@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. — Duy Hưng Androgyne Tenor, Aug 11 '16 at 07:58
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 — Drace, Sep 15 '22 at 01:55

score 0 · Answer 2 · edited May 23 '17 at 12:03

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.

score -1 · Answer 3 · answered Oct 29 '15 at 09:52

-1

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.

answered Oct 29 '15 at 09:52

Santanu Kumar

410
3
15

2

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. – Jaikrat Oct 29 '15 at 09:54
You can apply same code for your dynamic element. Replace the selector with your dynamic element. – Santanu Kumar Oct 29 '15 at 09:56

AutoComplete in jQuery with dynamically added elements

3 Answers3

Linked