javascripthtmlreactjsmaterial-uimui-autocomplete

React Material UI Autocomplete customize `no options` text


I'm looking at this example of Autocomplete provided by Material UI

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

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


Solution

  • 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