Autocomplete

The autocomplete is a normal text input enhanced by a panel of suggested options.

Material-UI doesn't provide a high-level API for solving this problem. You are encouraged to use a solution the React community has built, following one of the examples below.

downshift

This example demonstrates how to use downshift.

The last demo allows the user to clear the input and show a number of options on focus.

react-select

This example demonstrates how to use react-select.

react-autosuggest

This example demonstrates how to use react-autosuggest. It also uses autosuggest-highlight for the highlighting logic.

Complementary projects

For more advanced use cases you might be able to take advantage of:

• material-ui-chip-input: The chip input is used to allow selecting multiple text values.
• mui-downshift: A thin layer over paypal's downshift to use Material-UI visual components.
• material-ui-autosuggest: A fuzzy-search component for React and Material-UI.
• react-select-material-ui: Extend react-select with Material-UI.