This example shows how a completion can be done inline instead. By default, the autocomplete will find the first match and display it. It can be autocompleted by either:
- pressing the tab key on desktops
- tapping the selection text on touch devices
findInlineSuggestion function just does a simple ignore case matching. See the
propTypes tab for more information.
This example will show how you can use Autocompletes in a toolbar for applications that have a primary function of searching and how you can modify the list items for highlighting search results.
Autocomplete also accepts valid React elements in the
data prop, it is possible to create a lazy
loading list of suggestions in the
Autocomplete. This is really nice when the
Autocomplete plugs into a
nice API that paginates results.
The site's search uses pagination for its search results using react-waypoint.
By default, only 10 search results are returned at a time so when a user scrolls near the bottom of the suggestion list,
the next 10 results will be fetched as well. You can view the source code for the search by clicking on the source icon button.
Autocomplete has paginated results, it is recommended to provide the
prop. This will update each list item in the results with the
NOTE: Any item in the list that is a React Element will be ignored when typing in the autocomplete.