##

Demos

Menu Search

# Autocomplete

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

## Remote data

To use the filter as an autocomplete that taps into remote data sources, you can use the `filterablebeforefilter` 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 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)

- Acura
- Audi
- BMW
- Cadillac
- Chrysler
- Dodge
- Ferrari
- Ford
- GMC
- Honda
- Hyundai
- Infiniti
- Jeep
- Kia
- Lexus
- Mini
- Nissan
- Porsche
- Subaru
- Toyota
- Volkswagen
- Volvo

### Inset listiew

- Acura
- Audi
- BMW
- Cadillac
- Chrysler
- Dodge
- Ferrari
- Ford
- GMC
- Honda
- Hyundai
- Infiniti
- Jeep
- Kia
- Lexus
- Mini
- Nissan
- Porsche
- Subaru
- Toyota
- Volkswagen
- Volvo

## Providing richer search content

By default, the 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>

- Adobe
- Amazon
- Apple
- Google
- IBM
- Microsoft
- Yahoo
- United States

- Home
- Introduction
- Buttons
- Button widget

- ### Checkboxradio widget

  - Checkboxes
  - Radio buttons

- ### Collapsible (set) widget

  - Collapsible
  - Dynamic collapsibles
  - Collapsible set

- ### Controlgroup widget

  - Controlgroup
  - Dynamic controlgroups
- Datepicker

- ### Events

  - Swipe list items
  - Swipe page navigation
- Filterable widget
- Flipswitch widget

- ### Forms

  - Forms
  - Hide labels
  - Field containers
  - Forms disabled
  - Forms gallery

- ### Grids

  - Grids
  - Buttons in grids
  - Custom responsive grids
- Grouping and dividing content

- ### Icons

  - Icons
  - Grunticon loader

- ### Listview widget

  - Listview
  - Listview autocomplete
  - Listview autocomplete remote data
  - Listview autodividers linkbar
  - Listview autodividers selector
  - Listview Nested Listviews
  - Listview collapsible list items (flat)
  - Listview collapsible list items (indented)
  - Listview responsive grid
- Loader widget
- Navbar widget

- ### Navigation

  - Navigation
  - Linking pages
  - PHP redirect demo
  - Hash processing demo

- ### Pages

  - Pages
  - Single page
  - Multi-page template
  - Dialog page

- ### Panel widget

  - Panel
  - External panels
  - Fixed panels
  - Panels responsive
  - Custom panel style
  - Panel open on swipe
  - Panel external and internal

- ### Popup widget

  - Popup
  - Popup alignment
  - Popup arrow size
  - Dynamic popups
  - Popups with iframes
  - Popup image scaling
  - Popup outside multi-page
- Rangeslider widget
- Responsive Web Design

- ### Selectmenu widget

  - Selectmenu
  - Custom select menu
  - Custom select menu with filter

- ### Slider widget

  - Slider
  - Slider flip toggle switch
  - Slider tooltip

- ### Table widget

  - Table Column Toggle
  - Table Column Toggle demo
  - Table Column Toggle heading groups
  - Table Column Toggle options
  - Table Reflow
  - Table Reflow heading groups
  - Table Reflow stripes and strokes
  - Table Reflow custom styles
- Tabs widget
- Textinput widget

- ### Theming

  - Default theme
  - Classic theme

- ### Toolbar widget

  - Toolbar
  - Dynamic toolbars
  - External toolbars
  - Fixed toolbars
  - Fullscreen toolbars
  - Fixed external toolbars
  - Persistent toolbars
  - Ajax optimized toolbars
  - Form in toolbar
- Transitions

- ### 3rd party API demos

  - Backbone RequireJS
  - Google Maps geolocation
  - Google Maps list toggle

- Home
- Introduction
- Buttons
- Button widget

- ### Checkboxradio widget

  - Checkboxes
  - Radio buttons

- ### Collapsible (set) widget

  - Collapsible
  - Dynamic collapsibles
  - Collapsible set

- ### Controlgroup widget

  - Controlgroup
  - Dynamic controlgroups
- Datepicker

- ### Events

  - Swipe list items
  - Swipe page navigation
- Filterable widget
- Flipswitch widget

- ### Forms

  - Forms
  - Hide labels
  - Field containers
  - Forms disabled
  - Forms gallery

- ### Grids

  - Grids
  - Buttons in grids
  - Custom responsive grids
- Grouping and dividing content

- ### Icons

  - Icons
  - Grunticon loader

- ### Listview widget

  - Listview
  - Listview autocomplete
  - Listview autocomplete remote data
  - Listview autodividers linkbar
  - Listview autodividers selector
  - Listview Nested Listviews
  - Listview collapsible list items (flat)
  - Listview collapsible list items (indented)
  - Listview responsive grid
- Loader widget
- Navbar widget

- ### Navigation

  - Navigation
  - Linking pages
  - PHP redirect demo
  - Hash processing demo

- ### Pages

  - Pages
  - Single page
  - Multi-page template
  - Dialog page

- ### Panel widget

  - Panel
  - External panels
  - Fixed panels
  - Panels responsive
  - Custom panel style
  - Panel open on swipe
  - Panel external and internal

- ### Popup widget

  - Popup
  - Popup alignment
  - Popup arrow size
  - Dynamic popups
  - Popups with iframes
  - Popup image scaling
  - Popup outside multi-page
- Rangeslider widget
- Responsive Web Design

- ### Selectmenu widget

  - Selectmenu
  - Custom select menu
  - Custom select menu with filter

- ### Slider widget

  - Slider
  - Slider flip toggle switch
  - Slider tooltip

- ### Table widget

  - Table Column Toggle
  - Table Column Toggle demo
  - Table Column Toggle heading groups
  - Table Column Toggle options
  - Table Reflow
  - Table Reflow heading groups
  - Table Reflow stripes and strokes
  - Table Reflow custom styles
- Tabs widget
- Textinput widget

- ### Theming

  - Default theme
  - Classic theme

- ### Toolbar widget

  - Toolbar
  - Dynamic toolbars
  - External toolbars
  - Fixed toolbars
  - Fullscreen toolbars
  - Fixed external toolbars
  - Persistent toolbars
  - Ajax optimized toolbars
  - Form in toolbar
- Transitions

- ### 3rd party API demos

  - Backbone RequireJS
  - Google Maps geolocation
  - Google Maps list toggle