#

Navigation Search

- Accordion
- AJAX Navigation
- Autocomplete
- Buttons
- Checkboxes
- Collapsibles
- Controlgroup
- Dialogs
- Fixed toolbars
- Flip switch toggle
- Footer toolbar
- Form elements
- Grids
- Header toolbar
- Icons
- Links
- Listviews
- Loader overlay
- Navbar
- Navbar, persistent
- Pages
- Panels New
- Popup
- Radio buttons
- Select
- Slider, single
- Slider, dual range New
- Table, column toggle New
- Table, reflow New
- Text inputs & textarea
- Transitions
- Collapsibles
- Dynamic collapsible
- Controlgroups
- Dynamic controlgroup
- Listviews
- Grid Listview
- Autodividers Linkbar
- Autodividers Selector
- Navigation
- Backbone and Require.js example
- Redirection with server-side support
- Panels
- Panel styling
- Open panel on swipe
- Popups
- Dynamic popup
- Popup with arrow
- Responsive Tables
- Reflow: Custom styles
- Reflow: Heading groups
- Reflow: Refresh method
- Column toggle: Customization options
- Column toggle: Heading groups
- Column toggle: Refresh method
- Column toggle demo: Phone comparison
- Sliders
- Tooltip extension
- Swipe
- Swipe to navigate
- Swipe to delete list item
- Forms
- Why won't my CSS styles apply correctly to a widget?
- Updating the value of enhanced form elements does not work.
- My HTML 5 inputs look different across devices and browsers.
- My range or search inputs are being change to number/text.
- Sometimes my custom select shows as a popup other times its a dialog.
- Disabling a button does not work.
- Controls in my fixed header or footer are not responding or behave erratically.
- Pages
- Why aren't my scripts and styles loading?
- Why isn't DOM ready working for my scripts?
- How do I load a page?
- Why is only the first page of my multi page document loaded?
- I'm trying to pass query params to a page but it's not working?
- I'm trying to pass information via the hash but it's not working?
- I'm trying to use the application cache but it's not working.
- Content injected into a page is not enhanced.
- Triggering create on injected HTML does not work.
- How can I stop JQM from auto-enhancing an element?
- How can I stop JQM from enhancing a block of elements?
- How do I control page titles?
- How do I load a page?
- Events
- How do I use touch and mouse events?
- Theme and styling
- How does theming work?
- Apps
- How do I need to configure PhoneGap/Cordova?

# 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)

- 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 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>

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