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

Posted 2023-03-05

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

【英文标题】：Is there a way to use MUI Autocomplete when the search string is not in the option label?

【发布时间】：2022-01-21 17:15:55

【问题描述】：

我有一组对象，它们在 Material UI 自动完成中使用，并通过“getOptionLabel”显示为选项。有没有办法通过将输入字符串与未显示为标签的选项值的属性匹配来过滤选项？ 例如，在下面的示例代码 sn-p 中，我希望用户能够输入项目 id - 例如5141 并且选项应该被过滤为“黄铜管”。

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>

【参考方案1】：

我认为createFilterOptions 是正确的做法。修改stringify 选项可以得到你想要的。

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

<Autocomplete filterOptions=filterOptions />;

这是codesandbox link。