数以千计的可变高度项目的虚拟滚动网络自动完成？

Question

在我们的网络应用中，我们想要添加一个启用自动完成功能的搜索框，其中自动完成结果：

1. 可以垂直滚动，以便用户可以浏览一长串匹配结果，甚至可以在输入任何内容之前浏览完整列表。 （我们希望在搜索框获得焦点后立即弹出自动完成列表）
2. 每个自动完成项可以有可变高度，因为每个项都有一个名称（在某些情况下可以换成两行）和一个简短的描述（1-3 行长）。
3. 可以包含格式化的 HTML（例如名称的粗体文本）而不仅仅是纯文本。我们正在使用 Knockout.js 模板来呈现这种格式化的 HTML，但在需要其他技术时非常灵活。

自动完成列表的源数据位于客户端的 JavaScript 数组中。客户端上还有过滤逻辑，用于确定哪些结果将显示为用户类型。所以理论上我们应该有一个超快的解决方案，因为没有服务器依赖。

问题在于渲染整个自动完成列表（例如，使用像 JQuery UI autocomplete 这样的实现）会创建数千个 DOM 元素，并且在客户端上渲染非常慢。 Knockout.js 开销使情况变得更糟。当用户将焦点设置到搜索框时，浏览器会锁定几秒钟！

我们已经尝试过Kendo UI virtual-scrollable autocomplete widget，但 Kendo 的实现仅限于固定高度的元素。

对接下来要尝试什么有什么建议吗？

Answer 1

您可能需要考虑select2。虽然它不是一个自动完成小部件，但它以组合框的形式完成了您要求的所有事情。它可以配置为允许用户输入不在选择列表中的值。最后，this 是一个改变 CSS 以允许自动换行项目的技巧。

我没有将它用于非常大的数组，但正如你所说，理论上它应该运行得很快。也许值得研究。