资料Ui自动过滤选项未按预期工作。
资料Ui自动过滤选项未按预期工作。
提问于 2021-09-15 18:14:30
我有自动完成，在这里我传递了一个获取的和预定义的选项数组.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}并显示了选项列表.)
但是它不会过滤掉预定义的选项(见屏幕截图)
有什么建议吗？
回答 2
Stack Overflow用户
发布于 2021-09-15 19:50:00
您可以在自动完成组件中使用filterOptions支柱。它给了你两个参数。第一个是您给它的选项，第二个是输入组件的状态。因此，您可以使用您自己的filterize定制它：
const filterOptions = (options, state) => {
let newOptions = [];
options.forEach((element) => {
if (
element.place_name
.replace(",", "")
.toLowerCase()
.includes(state.inputValue.toLowerCase())
)
newOptions.push(element);
});
return newOptions;
};
Stack Overflow用户
发布于 2021-09-15 19:21:15
因此，在filterOptions上，您只返回应该过滤的选项。您可以尝试添加：
filterOptions={(options) =>
options.filter(({ place_name }) => place_name.includes(query))
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69198032
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号