Autocomplete API

An autocomplete widget backed by either local or remote data can be created by leveraging the listview filter feature.

Remote data

To use the listview filter as an autocomplete that taps into remote data sources, you can use the listviewbeforefilter event to dynamically populate a listview as a user types a search query: Remote autocomplete demo

Local data

The filter reveal feature makes it easy to build a simple autocomplete with local data. When a filterable list has the data-filter-reveal="true", it will auto-hide all the list items when the search field is blank. The data-filter-placeholder attribute can be added to specify the placeholder text for the filter.

Any listview filter with more than 100-200 items may be slow to perform on a mobile device so we recommend using this feature for autocomplete situations with a relatively small number of items.

Full width listview (non-inset)

Inset listiew

Providing richer search content

By default, the listview filter simply searches against the contents of each list item. If you want the filter to search against different content, add the data-filtertext attribute to the item and populate it with one or many keywords and phrases that should be used to match against. Note that if this attribute is added, the contents of the list item are ignored.

This attribute is useful for dealing with allowing for ticker symbols and full company names to be searched, or for covering common spellings and abbreviations for countries.


<li data-filtertext="NASDAQ:AAPL Apple Inc."><a href="#">Apple</a></li>
<li data-filtertext="USA U.S.A. United States of America"><a href="#">United States</a></li>