Menu Completion View
This example shows how you can use the two built in filters or a 3rd party library to do text matching. When
the user starts typing, the
Autocomplete will search the list of
data for any text matching the current
value. For this example, all the filtered data and results will appear in a drop down menu.
Inline Completion View
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
A lot of the time, you won't actually have access to all of the autocomplete matches because you will be using some amazing backend indexer and apis to populate while the user types.
Since the list of
data will always be updating and the filtering is done by a server, set the
filter prop to
null to prevent any unneeded work on the client side. It is also normally helpful to set the
instead of the default
The example below will use the Spotify API to search for an artist, and then display their albums once it is selected.
Lazy Loading Ajax
Autocomplete also accepts valid React elements in the list items that won't be searched, it is
possible to create a lazy loading list of suggestions in the autocomplete. This is very beneficial when your
api paginates the search results. This is actually how the main search has been implemented for this site.
The site's search uses the react-waypoint component to fetch the next 10 items in the search results when the user scrolls to the end of the list. This continues until there are no results remaining. You can view the source code for the search by clicking the source code button on this card.
When an autocomplete appears in a toolbar, it will automatically update the list to appear below the toolbar and fixed to the entire width of the screen while tablets and desktops will be absolutely positioned and have a width equal to the text autocomplete's with.
If you want the text field to gain the font size of the toolbar's normal font size, you will need to add
inputClassName="md-text-field--toolbar" to the autocomplete.
If you want the autocomplete to align with the default title keyline, you will need to add the
to the autocomplete.
- Nulla duis consectetur irure dolorPariatur est sint aliquip excepteur amet ea sint quis fugiat.
- Consectetur commodo culpa proident etConsectetur ad reprehenderit ea ut esse cupidatat et.
- Nostrud dolore sunt commodo nonNisi adipisicing sunt in do anim culpa amet non esse qui aute adipisicing cupidatat.
- Nostrud quis elit irure incididuntSunt labore culpa ipsum incididunt laboris labore.
- Lorem irure commodo ea exercitationUt qui dolore in cillum magna nulla Lorem do do pariatur amet labore anim.
- Qui cillum sunt nulla consecteturProident ad anim mollit Lorem minim ullamco Lorem ea excepteur ipsum commodo.