CODEWITHSUNDEEP
jqueryautocomplete
user663724
user663724

Reputation:

Why isn't the jquery Autocomplete minlength property not working with ajax call

I am using Jquery UI Ajax for Auto Completion of a text field .

This is my code

http://jsfiddle.net/41w8b23q/1/

<input type="text" name="state" id="state" placeholder="state" required="" onkeypress="return nospecialCharacters(event)" class="ui-autocomplete-input error" autocomplete="off">

$("#state").on("keydown", function(event) {
    var statevalue = $("#state").val();
    if (statevalue) {
      $.ajax({
        type: 'GET',
        url: url + '/HHH/JUI/chdautosuggestatemodified?state=' + statevalue,
        jsonpCallback: 'jsonCallback',
        cache: true,
        dataType: 'jsonp',
        jsonp: false,
        success: function(respons) {
          $("#state").autocomplete({
             noResults : '',
            source: respons,
            minLength: 1
          });
        },
        error: function(e) {}
      });
    } else {
      //prevents();
      event.stopPropagation();
      //      event.preventDefault();
      event.stopImmediatePropagation();
    }
  });

Right now i am facing two issues .

Issue 1 :

When i enter data very fastly on that text field , i am getting Uncaught TypeError: undefined is not a function under browser console

Issue 2 :

The other issue i am facing is that , even though i mentioned minlength as 1 , its not showing the data until i enter 3 characters ??

Issue 1 is not so important but Issue 2 is i need to solve , could you please let me know how to resolve that ??

Upvotes: 1

Views: 3736

Answers (1)

satchcoder
satchcoder

Reputation: 797

You are using the autocomplete wrong. You don't have to take care of the key events. The autocomplete plugin does it for you. You have to tell the autocomplete consturctor that you source will be an ajax call. Look at the answer in this thread How to use source: function()... and AJAX in JQuery UI autocomplete

Upvotes: 1

Related Questions