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
    }
}

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

1 个答案: