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.
To create an autocomplete that uses a remote data source, you can use the filterablebeforefilter event of the Filterable widget to dynamically populate a listview as a user types a search query.
This is useful when you have a very large data set like cities, zip codes, or products that can't be loaded up-front locally. Use the view source button to see the JavaScript that powers this demo.
-If you have a small list of items, you can use the listview filter reveal option to make an autocomplete with local listview data.
+If you have a small list of items, you can use the filter reveal option to make an autocomplete with local listview data.
After you enter at least three characters the autocomplete function will show all possible matches.
-An autocomplete widget backed by either local or remote data can be created by leveraging the filter feature. -
+An autocomplete widget backed by either local or remote data can be created by using the Filterable widget on a listview.
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.
The filter reveal feature of the Filterable widget makes it easy to build a simple autocomplete with local data. When the Filterable widget is used on a list that has the data-filter-reveal="true" attribute, it will auto-hide all the list items when the search field is blank.
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.
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" attribute, 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. If you need to search against a long list of values, we provide a way to create a filter with a remote data source.
The filter reveal feature of the Filterable widget makes it easy to build a simple autocomplete with local data. When the Filterable widget is used on a list that has the data-filter-reveal="true" attribute, it will auto-hide all the list items when the search field is blank. If you need to search against a long list of values, we provide a way to create a filter with a remote data source.