使用React组件自动完成

Question

我想要一个如下所示的自动提示工作流程。我想显示自定义信息，而不是在文本字段中显示数字ID（例如123）。

虽然我可以用React完成剩下的工作，但仍然需要自动完成。我有两个要求：

1. 选中后，提供包含丰富数据{id: 123, title:"Prince Hall", info:"123 Foo St"}
的回调
2. 具有允许我重用JSX模板的自定义渲染

JQueryUI和Twitter自动填充功能具有这两个功能。但是他们的项目渲染需要基于字符串，但我想重用基于虚拟dom的JSX模板。我不想用字符串模板复制/硬编码JSX模板。

Answer 1

结帐react-select。它简单，美观，目前拥有最多的Github明星。 Live demo here

Answer 2

React-Autosuggest是一个满足要求的组件。它具有自定义渲染，可与React元素本机一起使用。

我们可以让它处理JS对象而不是普通的字符串。

1. onSuggestionSelected道具是获取所选建议的回调
2. suggestionRenderer方法接受建议并返回React标记

http://react-autosuggest.js.org/

Answer 3

另一个强大的自动完成/自动建议模块是“ downshift”，它具有各种各样的道具，可以更好地进行自定义。降档与以选择框形式打开的react-select不同，它是一个文本框，其文本框会在其值更改时取消隐藏单词的建议列表。