Material-UI Autocomplete Component

Simple Autocomplete component built with Material-UI. Support accessibility and works with keyboard, screen readers, and touch screens.

Suppored keys

• UP
• Down
• ESC
• ENTER
• Mouse clicks

Dependencies

• Material-UI v4.11.0
• React version supports Hooks

Usage Example:

import MuiAutoComplete from "./components/MuiAutoComplete"

const App = () => {
  // State
  const [inputValue, setInputValue] = useState("")

  // Handle Change
  const handleChange = e => setInputValue(e.target.value)

  // Handle Select
  const handleSelect = value => setInputValue(value)

  return (
    <div className="App">
      <MuiAutoComplete
        options={myArray}
        inputValue={inputValue}
        handleChange={handleChange}
        handleSelect={handleSelect}
      />
    </div>
  )
}

Demo

codeSandbox