Question

我的想法是将过滤后的用户（建议）列表保留为组件上的状态，当输入更改时，状态会更新。

如何在文本框下方显示已过滤的列表？一种选择是＆＃39; datalist＆＃39;标记（HTML5），但列表已经过滤，此标记的部分功能正在过滤。我无法使用任何库或框架。

英语不是我的母语，如果您发现错误，请抱歉。

感谢。

Answer 1

尝试设计库中的组件，例如Material-UI自动完成组件http://www.material-ui.com/#/components/auto-complete

dataSource属性表示自动填充选项数组。

Answer 2

我是如何做的是将dataList数组作为prop和filterByField prop传递，以便您可以更改要过滤的内容，然后向输入添加事件侦听器（{{1} }）将值传递给过滤dataList的函数。

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});
}

然后在我的render（）中，我只是检查filteredList是否为null并显示一个无序列表，我使用css在输入下方显示。

if (filteredDataList.length === 0) {
  this.setState({noMatchFound: true});
}

{this.state.filteredList !== null <ul className="autocomplete-list"> {this.filteredListMarkup()} </ul> }然后使用map为每个项目返回filteredListMarkup()，并使用必要的事件处理程序将所选项目更新为输入，并按<li>关闭autocomplete-list < / p>

Answer 3

您可能还会发现这个有用：

https://github.com/reactjs/react-autocomplete

Answer 4

即使您可以使用依赖项，我也尝试了很多最新的依赖项，个人不满意（添加了诸如jQuery之类的依赖项，使用/理解/定制不轻量级，css挑战等）。

最后，我找到了这个lightweight vanilla React typeahead tutorial（不，我没有写教程）。它快速，简单，并且不增加任何依赖树权重（例如jQuery）或依赖维护。这个解决方案也很容易适应我使用的较新的React模式和库，我想您可能正在使用的模式/库也是如此。也许这会帮助您或像我这样的其他人。

使用ReactJS构建自动完成文本框

4 个答案: