The UX of AutoComplete

Autocomplete is one of those UI widgets that can revolutionize an application. Jörn Zaefferer has developed a beautiful lightweight version of autocomplete for jQuery. In my Marketo app, I am heavily using Jack Slocum’s EXT autocomplete. Once I introduced it, it really eliminated alot of complexity, not to mention modal dialogs. As a UI tool, it is just essential. Some key UX attributes that they both share:

  • Keyboard works. Press down or enter. Very easy to get power users their fix.
  • Highlights the letters in the result set. This is a subtle but important example.
  • Ajax filtering for high cardinality pickers.
  • Fast! This is awesome.
  • Lightweight (more for Jorn than for Jack)
  • Easy to implement (depends on who is implementing. jQuery is easier for me, of course)

There is one item that neither is enabling, but is quite important. I have pickers that allow comma-separated values, sort of like the address bar in gmail or outlook. The autocomplete needs to be able to work in a series, in a textarea or text input. This would be the coup-de-gace for either of these widgets.

UPDATE:  Jorn’s version DOES do this.  It has a couple of quirks if you try to break it, like putting your cursor back to the beginning, but overall it works great.

Great work to both of them. This is a boon to all UX designers out there. Use autocomplete!

One reply on “The UX of AutoComplete”

Ext’s autocomplete can be also used as an enhanced select-dropdown. The necessary code for restricting the selection is already present in the jQuery-plugin, but there isn’t yet a decent UI. Basically there isn’t much more to it then positioning an element next to the input (or inside of it) that opens the select when clicked, while still allowing you to select the item by keyboard-filtering. Any help on HTML/CSS for that is highly appreciated.

Whatya think?