Question

I am using the latest version of JqueryUI autocomplete(1.8.23).
I am using autoFocus : true property and this is giving me a big problem.

When I start typing text in my input box at a somewhat quick pace, the autoFocus : true causes the text to be replaced with value from previous matches.

eg: when I type “foot”, this fires a request to the server and the first selection in the autocomplete dropdown becomes “foot”, whereas I would have quickly continued to type “football”. This replaces the letters ball as I type them.

Anybody faced this and found a solution?

UPDATE

This is a bug raised on the jquery ui site. Though it has been closed as fixed, it is not available in their latest stable version available for download.
http://bugs.jqueryui.com/ticket/7555

If someone has found a workaround for this solution, would be great if you can share it.

Answer 1

Though the bug has been closed as “fixed” by the JQueryUI team, the fix is shown to be available only in 1.9.0 release. So until then, this is a workaround to the problem. The blur event is the cause of this problem.

Add the following piece of code to your page’s javascript:

$('.ui-autocomplete-input').each(function (idx, elem) {
      var autocomplete = $(elem).data('autocomplete');
      if ('undefined' !== typeof autocomplete) {
            var blur = autocomplete.menu.options.blur;
            autocomplete.menu.options.blur = function (evt, ui) {
                  if (autocomplete.pending === 0) {
                        blur.apply(this,  arguments);
                  }
             };
      }
 });

Credit goes to these folks