Question

Here’s my code:

$("#hifind-find").keyup(function(){

  var val = $(this).val();

  if (val.length > 1) {
    var posturl = '/hifind/jquery_ui/autocomplete/'+val;

    $.post(posturl, function(r) { 

      $("#hifind-find").autocomplete({
        source: r,
        delay: 50,
        minLength: 2
      });

      $("#hifind-find").bind('autocompleteselect', function(){
        alert('test');
      });

    }, "json");
  }

});

I type a letter in the #hifind-find field. As expected, nothing happens because the val isn’t greater than 1 yet. I type a second character. As expected, the post fires and the response in firebug is what I would expect. But the jquery ui plugin does not show the matching items below the field. If I then backspace once and then type the second character again, the post fires again and this time the options are presented. The results are always presented the second consecutive time an identical search is conducted. So…

1. ba (no options presented)
2. Backspace twice, and then…
3. ba (“banana” is presented as an option, and “babe ruth”, etc).

But, if I reload, and then…

1. ba (nothing presented)
2. ap (nothing presented)
3. ba (nothing presented)
4. ap (nothing, and so on until I do the same search twice consecutively)

I can see in firebug that the response from the callback is the same every time, and contains the right data.

Ideas?

Answer 1

You’re doing it all wrong. Instead of binding to keyup yourself you should supply a callback to the autocomplete search field.. This way the autocomplete will do caching and what not for you.

See this post: http://jqueryui.com/demos/autocomplete/#remote-with-cache

For how to better use the autocompleter.

In your example it would look like this:

      $("#hifind-find").autocomplete({
        source: function(request, response) {
          var posturl = '/hifind/jquery_ui/autocomplete/'+request.term;
          $.post(posturl, function(data) { 
             response(data);
          }, "json");
         },
        delay: 50,
        minLength: 2
      });

      $("#hifind-find").bind('autocompleteselect', function(){
        alert('test');
      });

I suggest you add a cache to that as described in the post I linked to.