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

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

如何在文本框下方显示过滤列表？ 一个选项是“datalist”标记（HTML5），但该列表已被过滤，该标记的部分功能是过滤。 我不能使用任何库或框架

英语不是我的母语，如果你发现一些错误，很抱歉

---

谢谢。

尝试设计库中的组件，如Material UI autocomplete组件

---

dataSource

属性表示自动完成选项的数组。

您可能还会发现这一选项很有用：

---

我是如何将

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

{this.state.filteredList！==null

{this.filteredListMarkup（）}

}

---

filteredListMarkup（）

然后使用map为每个项目返回一个

，并使用必要的事件处理程序将所选项目更新到输入中，并通过

this.setState（{filteredList:null}）关闭
自动完成列表
即使您可以使用依赖项，我也尝试了一些当前最流行的依赖项，但我个人对其中任何一个都不满意（添加了依赖项，如jQuery、不轻量级使用/理解/自定义、css挑战等）

最后，我发现了这个（不，我没有写教程）。它快速、简单，并且没有增加依赖树权重（例如jQuery）或依赖维护。这个解决方案还可以轻松地调整到更新的React模式&我正在使用的库，我猜您可能正在使用的模式/库也是如此。也许这会对你或其他人有帮助，就像它对我一样。
我不能使用任何已开发的组件：/Awesome！这真的帮了我大忙。我使用的是Spectre.css，它有自动完成的css，但没有JavaScript。Spectre非常棒，而且非常轻量级，但如何将其与正确的javascript连接起来并不总是很清楚，这符合要求。另外，值得注意的是，您可以在该过滤器函数中进行大量处理。您不必向它传递字符串数组。我正在发送一个JSON对象数组，并与其中的某个属性进行比较。此链接将为您提供解决方案：