ReactJs + MUI 5 Autocomplete特定搜索词无结果展示问题

问题原因 #

MUI 5的Autocomplete组件默认会对传入的options执行内部过滤，它会拿当前输入值和getOptionLabel返回的文本做匹配。即便你已经通过onInputChange根据搜索词请求到了正确的后端数据，组件仍会自动过滤这些结果。当输入"apple airp"时，后端返回的选项名称可能不符合组件默认的匹配规则，导致被过滤掉，所以下拉不显示；而输入"apple airpo"时匹配逻辑生效，正常展示选项。

解决方案 #

既然后端已经返回了精准匹配搜索词的结果，我们可以直接禁用Autocomplete的自动过滤逻辑，让组件直接展示后端返回的所有选项。

修改Autocomplete组件

在Autocomplete中添加filterOptions属性，直接返回所有传入的options：

<Autocomplete
  freeSolo
  id="combo-box-demo"
  options={options}
  onInputChange={onInputChange}
  getOptionLabel={(option) => option.name}
  // 禁用组件内部过滤，直接使用后端返回的所有选项
  filterOptions={(options) => options}
  renderInput={(params) => (
    <TextField {...params} label="搜索" variant="standard" />
  )}
/>

优化数据更新逻辑

同时可以优化getData函数，去掉不必要的长度判断，确保无论后端返回结果是否为空，都能正确更新options：

async function getData(searchTerm) {
  const productResponse = await ProductApi.searchProduct(searchTerm);
  // 直接设置options，空数组会自动清空下拉列表
  setOptions(productResponse || []);
}

效果说明 #

添加filterOptions={(options) => options}后，组件不再对选项做二次过滤，后端返回的所有结果都会直接显示在下拉列表中，解决输入短搜索词时不展示选项的问题。

内容的提问来源于stack exchange，提问作者LanMan