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
  • Nulla duis consectetur irure dolor
    Pariatur est sint aliquip excepteur amet ea sint quis fugiat.
  • Consectetur commodo culpa proident et
    Consectetur ad reprehenderit ea ut esse cupidatat et.
  • Nostrud dolore sunt commodo non
    Nisi adipisicing sunt in do anim culpa amet non esse qui aute adipisicing cupidatat.
  • Nostrud quis elit irure incididunt
    Sunt labore culpa ipsum incididunt laboris labore.
  • Lorem irure commodo ea exercitation
    Ut qui dolore in cillum magna nulla Lorem do do pariatur amet labore anim.
  • Qui cillum sunt nulla consectetur
    Proident ad anim mollit Lorem minim ullamco Lorem ea excepteur ipsum commodo.