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

Question

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 ??

Answer 1

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