使用 React 组件自动完成

Posted 2023-03-05

【中文标题】使用 React 组件自动完成

【英文标题】：Autocomplete with React components

【发布时间】：2015-10-26 12:57:27

【问题描述】：

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

虽然我可以使用 React 完成其余的工作，但我仍然需要进行自动完成。我有两个要求：

选中后，提供具有丰富数据的回调id: 123, title:"Prince Hall", info:"123 Foo St" 具有允许我重用 JSX 模板的自定义呈现

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

【问题讨论】：

能否请您添加您已经开始使用的代码以及什么不起作用？正如写的那样，这个问题太宽泛了，它要求为您选择一个组件，然后编写代码。

@WiredPrairie，是的，我觉得这个问题很难回答，推荐问题。我从 JqueryUI 和 Twitter 自动完成开始，它们有自定义渲染，但只有字符串模板；并且使用 React 的虚拟 dom 和字符串渲染是一个无法破解的问题。这就是为什么我问是否有任何自动完成功能可以很好地与 React 渲染配合使用。抱歉措辞太懒了。

【参考方案1】：

React-Autosuggest 是一个符合要求的组件。它具有可与 React 元素原生配合使用的自定义渲染。

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

onSuggestionSelected 属性是获取所选建议的回调 suggestionRenderer 方法接受建议并返回 React 标记

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

【参考方案2】：

查看react-select。它简单、漂亮，目前拥有最多的 Github 明星。 Live demo here.

【参考方案3】：

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