How can I filter the options in a Material UI Autocomplete component based on a property of the option value that is not displayed as the label? I want the user to be able to input an item id, like 5141, and have the options filtered to show 'brass pipes'.
const MyAutoComplete = () => {
const [item, setItem] = useState()
const [input, setInput] = useState('')
const items = [
{ id: 5141, name: 'brass pipes', listPrice: 2.32 },
{ id: 214, name: 'bronze pipes', listPrice: 1.89 },
{ id: 3155, name: 'toilet seat ', listPrice: 5.61 }
]
return (
<Autocomplete
options={items}
getOptionLabel={(item) => item.name || ''}
value={item}
onInputChange={(e, v) => {
setInput(v)
}}
isOptionEqualToValue={(option, value) => option.id === value.id}
inputValue={input}
onSelect={(e, v) => setItem(v)}
renderInput={(params) => (
<TextField {...params} label="items" variant="standard" />
)}
/>
);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>