我的想法是将过滤后的用户（建议）列表作为组件的状态，当输入更改时，状态会更新。
如何在文本框下方显示过滤后的列表？ 一个选项是“datalist”标签 (HTML5)，但该列表已被过滤，并且该标签的部分功能是过滤。 我不能使用任何库或框架。
英语不是我的母语，如果发现错误，请见谅。
谢谢。
【问题讨论】：
标签： javascript reactjs autocomplete
即使你可以使用依赖项，我也尝试了一堆当前最流行的依赖项，但我个人对其中任何一个都不满意（添加了 jQuery 等依赖项，使用/理解/自定义不是轻量级的，css 挑战等）。
最后，我找到了这个lightweight vanilla React typeahead tutorial（不，我没有写教程）。它快速、简单，并且没有添加依赖树权重（例如：jQuery）或依赖维护。这个解决方案也很容易适应更新的 React 模式和我正在使用的库，我猜你可能正在使用的模式/库也是如此。也许这会对您或其他像我一样的人有所帮助。
【讨论】：
我的做法是将dataList 数组作为道具和filterByField 道具传递，以便您可以更改要过滤的内容，然后将事件侦听器添加到传递值的输入 (onChange)到过滤数据列表的函数。
onChangeInput(e) {
const { dataList, filterByField } = this.props;
const filteredDataList = dataList.filter(items => items[filterByField].toLowerCase().startsWith(e.target.value.toLowerCase()) );
// update internal component state to trigger render of dropdown list
this.setState({filteredList: filteredDataList});
}
我还添加了未找到匹配项的检查，以便显示消息：
if (filteredDataList.length === 0) {
this.setState({noMatchFound: true});
}
然后在我的 render() 中，我只需检查 filteredList 是否不为 null 并显示一个无序列表，我使用 css 在输入下方显示该列表。
{this.state.filteredList !== null
<ul className="autocomplete-list">
{this.filteredListMarkup()}
</ul>
}
filteredListMarkup() 然后使用 map 为每个项目返回一个 <li>，并使用必要的事件处理程序将所选项目更新到输入中并通过 this.setState({filteredList: null}); 关闭 autocomplete-list
【讨论】：
您可能还会发现这个很有用：
【讨论】：
尝试使用设计库中的组件，例如 Material-UI 自动完成组件http://www.material-ui.com/#/components/auto-complete
dataSource 属性表示自动完成选项的数组。
【讨论】：