jquery - 在包含 6000 多个列表项的大型 html 列表中搜索

Question

我有以下格式的大型 html 列表。html 页面大小为 6 mb，列表项超过 6000 个。我想为其添加搜索和排序功能。我尝试了 list.js，它使用较少的列表项可以完美地工作，但是当我使用 6 MB html 列表加载它时，浏览器崩溃并且第一次离线加载大约需要 3 到 4 分钟。如何在这个大列表中添加搜索？

<li> <p class="vs" id="list1">
  &nbsp;content from list one 
</li>

<li> <p class="vs" id="list2">
  &nbsp;content from list two 
</li>

<li> <p class="vs" id="list3">
  &nbsp;content from list three
</li>

<li> <p class="vs" id="list4">
  &nbsp;content from list four
</li>

Answer 1

首先将所有项目缓存到一个对象中：

var abbrs = {};

$("ul#abbreviations li").each(function (i) {
    abbrs[this.firstChild.nodeValue] = this;
});

然后在您的对象中查找键入的文本：

var li = abbrs[this.value.toUpperCase()];
// show li, hide others

更新：对于部分匹配，您必须遍历集合：

var filterBy = this.value.toUpperCase();

for (var abbr in abbrs) {
    if (abbr.indexOf(filterBy) !== -1) {
        var li = abbrs[abbr];
        // show li
    }
}