Material Ui 自动完成 - 过滤选项未按预期工作

Question

我有自动完成功能，我在其中传递了一组已获取和预定义的选项... https://codesandbox.io/s/geocoding-demo-forked-2f189?file=/src/App.js

当我输入例如“Diestsestraat Leuven”它不显示任何选项，但是当我 console.log 它时，我看到了一系列选项。

• 我用这个答案解决了这个问题 - https://stackoverflow.com/a/68506363/16002090 （我添加了 - filterOptions={(options) => options}，它会显示选项列表...）

但它不会过滤掉预定义的选项（见截图）

有什么建议吗？

Answer 1

所以在filterOptions 上，您只返回应该过滤的选项。 您可以尝试添加：

filterOptions={(options) =>
  options.filter(({ place_name }) => place_name.includes(query))
}

Answer 2

您可以在 Autocomplete 组件中使用 filterOptions 属性。它为您提供 2 个参数。第一个是你给它的选项，第二个是输入组件的状态。因此，您可以使用自己的过滤器对其进行自定义：

const filterOptions = (options, state) => {
    let newOptions = [];
    options.forEach((element) => {
      if (
        element.place_name
          .replace(",", "")
          .toLowerCase()
          .includes(state.inputValue.toLowerCase())
      )
        newOptions.push(element);
    });
    return newOptions;
  };