Why JQuery Autocomplete is not executing?

Question

I hava a very interesting case where the JQuery Autocomplete field does not respond the first time i type in the TextBox, but when i TAB outside the TextBox and then return the cursor back to the TextBox for the second time it starts to respond and the results are shown as i start to type.

When i use firebug i can actually see the AJAX function in my application is been called and the results are returned to the html templete, but the result are not been displayed, what might be causing this behavior?

My function binding code:

  $(function()
  {
    $(document).ready(function(){
       $("#tags1").bind("keyup",autoFill)
      });
   });

My Autocomplete function

 function autoFill(){
           $("#tags1").autocomplete("/taglookup/", {
     width: 320,
     max: 4,
     highlight: false,
     multiple: true,
     multipleSeparator:",",
     scroll: true,
     scrollHeight: 300,
     delay: 10
         });
       }

My TextBox Field:

 <input type="text" style="width: 400px" id="tags1" name="tags1" value="">

Answer 1

If you are using the same autocomplete that I used today (on another computer sorry - can't find out what the exact version was) - then you don't need to bind on keyup - just bind once at startup -

<script>
    $('#tags1').autocomplete(....);
</script>

The autocomplete function handles all the keypresses/focusing changes etc.

Answer 2

Why are you making the autocomplete() call on keyup? I think that could be causing your problems. I would try just calling autocomplete() straight from the document ready event.

$(document).ready(function(){

        $("#tags1").autocomplete("/taglookup/", {
        width: 320,
        max: 4,
        highlight: false,
        multiple: true,
        multipleSeparator:",",
        scroll: true,
        scrollHeight: 300,
        delay: 10
         });

      });