Autocompletes

The Autocomplete component comes in two forms: Menu and Inline completions.

The Menu completion view is default. When the user types, any filtered (or best match) will appear in a menu. The user can then select a value by:

  • Using the up and down arrow keys to select a completion and then press enter or space to select the value
  • Using the mouse or touch to select a value

The Inline completion view can be enabled by setting the prop inline to true. This will allow a single best match to appear inline and the user can autocomplete by using the tab key.

Since there are many different ways to filter or sort data, there are only two basic filters included. A caseInsensitiveFilter and a fuzzyFilter. They are both pretty basic so you might want to include another library like fuse.js or something else. I didn't want to force a library dependency, so it was not included. The Inline completion view uses a simple find by best match ignoring case by default.

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

The default findInlineSuggestion function just does a simple ignore case matching. See the PropTypes tab for more information.

Never Gonna Bake You Up



Ajax Autocomplete

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 type to search instead of the default text.

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

Since the 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.

In Toolbar

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 className="md-title--toolbar" to the autocomplete.

network_wifinetwork_cellbattery_full12:30
  • Aliquip sit fugiat occaecat aute
    Reprehenderit anim cillum cupidatat pariatur id consequat ad ipsum veniam ullamco nostrud id.
  • Do sit elit ea voluptate
    Dolor cupidatat duis exercitation cillum.
  • Dolore incididunt fugiat esse excepteur
    Laboris est sunt et aliqua incididunt ipsum cupidatat ut sint reprehenderit in nostrud ipsum.
  • Irure amet proident consectetur ullamco
    Mollit enim id qui pariatur sunt qui ad eiusmod non sint adipisicing eu minim.
  • Nulla consequat elit sit incididunt
    Nulla amet dolore eu nulla ea dolor cillum Lorem dolore magna do officia.
  • Ipsum tempor consequat Lorem nulla
    Voluptate excepteur occaecat reprehenderit fugiat laboris incididunt sint Lorem aliquip ea adipisicing anim cupidatat enim.