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.
- Aliquip sit fugiat occaecat auteReprehenderit anim cillum cupidatat pariatur id consequat ad ipsum veniam ullamco nostrud id.
- Do sit elit ea voluptateDolor cupidatat duis exercitation cillum.
- Dolore incididunt fugiat esse excepteurLaboris est sunt et aliqua incididunt ipsum cupidatat ut sint reprehenderit in nostrud ipsum.
- Irure amet proident consectetur ullamcoMollit enim id qui pariatur sunt qui ad eiusmod non sint adipisicing eu minim.
- Nulla consequat elit sit incididuntNulla amet dolore eu nulla ea dolor cillum Lorem dolore magna do officia.
- Ipsum tempor consequat Lorem nullaVoluptate excepteur occaecat reprehenderit fugiat laboris incididunt sint Lorem aliquip ea adipisicing anim cupidatat enim.