Menu
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.
913
The Material-UI Autocomplete component and its Popper component can be styled by targeting built-in MUI styling APIs. The Popper is also called a dropdown or listbox. The difference is that Popper is the positioning element while Listbox is the visible list element.
How can you reduce the height of the autocomplete component of material-UI? To reduce the height, I used the size attribute and removed the label attribute. Make sure not to override the params provided by the Autocomplete component on your TextField component, which already include things like InputProps .
clearOnBlur={true} helps to clear the value of the autocomplete component when it loses focus.
MUI Autocomplete Default Value If you need to set the initial value for your Autocomplete component and then never programmatically update it again, the best option is the defaultValue prop. This prop accepts a value that only gets rendered until an option is selected from the Autocomplete's dropdown list.
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'}
...
/>
176
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
