Question

When using a jQueryUI AutoComplete with AutoFocus set to true, if you type too quickly and hit enter, the first selection will replace what you typed, even if it doesn’t match.

For example, if you type in “app”, and the first selection of the scrolling autocomplete is “apple”, and then continue to type in “applique” quickly and hit enter, “applique” is replaced by “apple”.

Immediately before the entered text is replaced by the first selection from the autocomplete, is there any way to make sure the first selection still matches the text entered?

Answer 1

Decrease your delay in the autoComplete options. If you’re using local data, you can set the delay to 0. By default, it’s set to 300 (ms). So, after you press a key, it takes 300ms before it re-evaluates the dataset for matches.

So, basically your autofocusing on the first item, and haven’t given it a chance to refilter before hitting enter.

Alternatively, you could change the delay mid stream after the first autoFocus. So, the first time you wait 300ms to show a suggestion, then in the focus event, you decrease the timer to 0ms so it’ll filter the list faster.

Be careful though, as a delay of 0 could cause issues if it’s remote data. Something like this might work well:

$(".selector").autocomplete({
  delay: 300,
  focus: function () {
    $(".selector").autocomplete("option", "delay", 0);
  },
  source: sourceData
}