React Material-UI Autocomplete customize `no options` text

user_8354181 0
Viewed 17038

I'm looking at this example of Autocomplete provided by MaterialUI

https://codesandbox.io/s/81qc1

I was wondering how I can display a "No options found" message if no results are found.

material-ui reactjs html javascript
5 Answers

Use props noOptionsText for Material-UI Autocomplete

Text to display when there are no options. For localization purposes, you can use the provided translations.

import Autocomplete from '@material-ui/lab/Autocomplete';

<Autocomplete
  noOptionsText={'Your Customized No Options Text'}
  ...
/>

enter image description here

user_118722460

For those who don't want "No options" to show up at all,

<Autocomplete 
    freeSolo={true}
/>
user_155923140
user_39955820

you can use noOption :

<Asynchronous
              noOption={  <div className="d-flex align-items-center justify-content-between mt-2">
                  <span className="fw-bold">User not found?</span>
                  <Button variant="text" color="primary" type="button" startIcon={<AddIc fontSize="small"/>} onClick={()=>setOpenModal(true)}>Add
                      User</Button>
              </div>}
/>
user_129021080

I would recommend you to check this link for fast and easy Autocomplete implementation. But if you want to build your own Autocomplete component using useAutocomplete check this

user_107069830
Related