使用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明星.现场演示.

Answer 2

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

我们可以使它处理JS对象而不是普通字符串.

1. 该onSuggestionSelected道具是一个回调来获得所选择的建议
2. suggestionRenderer 方法接受建议并返回React标记

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