Caching Autocomplete Responses Using Lodash

I've taken a few approaches to caching responses in the jQuery UI autocomplete widget. A response, in autocomplete parlance, is the data that's displayed when the user is typing in the text input. Each keystroke is a request for data — the response is something the autocomplete must generate by filtering some data source. The filtering operations can be done locally, or remotely. Either way, we stand to benefit from caching these responses.

jQuery UI: Autocomplete With Select Elements

The jQuery UI autocomplete widget expects an input as it's target element. It also expects a data source — the fundamental job of the autocomplete widget is tying these two things together. When the user starts typing, the autocomplete filters the data source, and offers the user a selection of possible input text values. When you think about it, the select element is similar to the autocomplete.

Using jQuery UI Tooltips With Autocomplete

The jQuery UI autocomplete widget can transform the way each individual item is rendered. By default, it only renders the data label. But that's easy to change by extending the autocomplete widget, and overriding the _renderItem() method. For example, if each object in the autocomplete source has some specific field you would like rendered in the autocomplete drop-down, that's not difficult to implement. The challenge lies with finding enough space on the page to render this additional information. The auto complete already utilizes the menu widget to render the drop-down component — so why not utilize the tooltip widget as well?

Rendering Autocomplete Results In Another Div

The autocomplete widget uses the menu widget to display the filtered results. It does this by creating the markup necessary to render the menu, then creates the widget. It would be nice if we weren't limited to displaying the autocomplete results inside a drop-down menu. Thing about a list view — one where the list of items take up the majority of the space on the page. Just above this list, you have the autocomplete input. So instead of just displaying the drop-down menu, as the widget normally would, we would like the existing list to be filtered. It's easy enough to extend the autocomplete with this capability.

Sorting Autocomplete Responses For Relevancy

The autocomplete widget will search a given data source for the term the user has typed into the text box. This happens as the user types, so with each keystroke, there's potential for a new data response to be rendered. This response, however, doesn't do any sorting. For example, the user could type "games", which could yield hundreds of results. The autocomplete widget isn't going to display hundreds of items, because the user would have to use their eyes to sift throught the results, line-by-line, which kind of defeats the purpose of the widget. Rather than displaying the autocomplete items in the same order as the source data, we could first sort them by some criteria.

jQuery UI: Highlighting Autocomplete Text

When a user types in an autocomplete text input field, the matching items are presented in a menu, just beneath the input. For example, the default autocomplete example uses an array of programming language strings as the source, so if you type "f", you'll get a menu displaying all items containing the letter "f" — doesn't matter where the "f" is located in the string, only that it's there. Sometimes, it's nice to see the matching portion of the item explicitly highlighted. Can we do this using the jQuery UI autocomplete widget?

Icons in jQuery UI Autocomplete Items

Adding custom display data to jQuery UI autocomplete items is easy. All we need is a basic CSS class with some custom properties, and the willingness to override the default implementation of the _renderItem() method. It's one thing to include some meta data about each item in the autocomplete drop-down. It's much more interesting, I think, when you display icons beside each item. Ready?

jQueryUI 1.8

jQueryUI 1.8 is now available, complete with a new button and auto-complete widget. The button widget is flexible enough to use different HTML elements as the basis for the widget. Auto-complete looks like a really nice widget as well. I'm looking forward to the combo-box widget becoming part of the stable jQueryUI distribution.

jQuery UI Select Menu

jQuery UI 1.8 is now at release candidate 3 and is looking like a 1.8 final release will be available any time now. After looking at the button demos, I haven't yet decided if I'm going to replace my existing custom buttons with these new widgets.

The auto-complete widget does look very promising, especially for large data sets. However, I have several instances where I have only a small data set and using an auto-complete widget would be overkill.

The select-menu widget looks perfect and I'm looking forward to a stable version in jQuery UI. It will be nice to replace the standard select elements, which look really out of place in a jQuery UI theme.