当搜索字符串不在选项标签中时，有没有办法使用 MUI 自动完成？

Question

我有一组对象在 Material UI 自动完成中使用并通过 'getOptionLabel' 显示为选项。有什么方法可以通过将输入字符串与未显示为标签的选项值的属性匹配来过滤选项？例如，在下面的示例代码片段中，我希望用户能够输入项目 ID——例如5141 并且选项应过滤为 '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>

Answer 1

我认为 createFilterOptions 是正确的做法。修改 stringify 选项即可满足您的需求。

const filterOptions = createFilterOptions({
  stringify: (option) => option.name + option.id,
});

<Autocomplete filterOptions={filterOptions} />;

这是codesandbox link。

当搜索字符串不在选项标签中时，有没有办法使用 MUI 自动完成？

Is there a way to use MUI Autocomplete when the search string is not in the option label?

reactjs

autocomplete

material-ui