jQuery UI Autocomplete with Chrome-like autofill

Question

I'm using the jQuery UI autocomplete functionality and, while I've found a way to implement the autoFill function, I was looking for functionality like in the Google Chrome address bar. Where the best matching item is auto-filled, but it doesn't interrupt your typing.

Any help is appreciated.

Answer 1

I suggest you look at the older jQuery autocomplete plugin, which offers this option built in. The syntax is similar, but instead of having the source as a option you instead initialized it as the first parameter, with this syntax:

$('input.autocomplete').autocomplete(data, {autoFill: true});

The data must be either an array of results, or an url that points to a server-side script that generates it. For more info see its documentation: http://docs.jquery.com/Plugins/Autocomplete

---

Do note however that the author of this plugin consider it obsolete, and the jQuery UI autocomplete to be its successor. In a 'How to migrate' post he points users now to, the rational jQuery UI not having the autofill option is explained:

autoFill: Gone with no immediate replacement available, for good reasons: The default behaviour when selecting items via keyboard now puts the focussed value into the input, like the Firefox Awesomebar does it. It's not the same as what the autoFill option did, but there should be no need to recreate that effect.