数千个可变高度项目的虚拟滚动网页自动完成功能？

Question

在我们的网络应用中，我们要添加启用自动填充功能的搜索框，其中包含自动完成的结果：

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

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

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

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

有关下一步尝试的建议吗？

Answer 1

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

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