9

我有一个下拉列表，其中包含大约 100,000 行组成一个列表。

<input id="search" type="text" />
<ul>
    <li>item 1</li>
    <li>item 2</li>
        ...
    <li>item 100,000</li>
</ul>

我有一个用作搜索的文本框，因此当您键入它时，它会匹配列表中项目的输入，删除不匹配的内容。这是我编写的用于删除列表元素的类。

见小提琴（列表有大约 2000 项） 

// requires jQuery
var Search = (function(){

    var cls = function (name) {
        var self = this;

        self.elem = $('#' + name);
        self.list = $('#' + name).next('ul').children();
        self.elem.bind('keyup', function () { self.change(); }); 
    };

    cls.prototype = {
        change: function () {
            var self = this;
            // gets the closest ul list
            var typed = self.elem.val();

            // only do something if there is something typed
            if (typed !== '') {
                // remove irrelevent items from the list
                self.list.each(function () {
                    var item = $(this).html();
                    if (item.indexOf(typed) === -1)  {
                        $(this).addClass('zero');
                        // tried using a class with visibility hidden
                    } else {
                        $(this).removeClass('zero');
                    }
                });
            } else {
                // check what list items are 'hidden' and unhide them
                self.list.each(function () {
                    if ($(this).hasClass('zero')) {
                        $(this).removeClass('zero');
                    }
                });
            }
        }
    };
    return cls;
}());

我只是添加一个添加高度为 0 的类，并且没有边距、填充等，但我也尝试过使用可见性：隐藏。我也尝试过在 jQuery 中使用 detach 方法，但这在速度方面大致相同。

他们是否有任何 JavaScript 专家可以看到代码中的任何问题，或者提供一些优化技术？

4

2 回答 2

3

当人们总是只使用一小部分时，保留 40k 行并不是一个现实的解决方案。你可以做的是缓存它。

  1. 只保留那些最常用的。
  2. 它使用得越多，它就会出现在顶部。
  3. 如果它从未使用过，它将永远不会出现。针对这种情况启动 ajax 请求。
于 2012-12-19T02:20:06.183 回答
3

即使有大量项目，这也可以“相对较好”（无论如何在桌面浏览器中）完成 - 尽管实际性能会根据其他因素而有所不同。

保持 UI 响应的“技巧”是随着时间的推移处理搜索/过滤，setTimeout或者setInterval只“一次做很多工作”。我发现，至少在 IE7/8 中，当我在侧边栏小工具中使用它时，20ms/30ms 的工作/休息时间效果很好。YMMV。

如果可以完全避免使用 DOM 进行搜索（例如，使用缓存从数组或其他可搜索结构中即时重新创建 n 项），那么这也可能会带来回报 - 运行一些基准测试！- 并使搜索更简单。

当然，至少对于“粗粒度结果”，利用服务器端解决方案（例如 AJAX）也可能更合适，具体取决于用例..

于 2012-12-19T02:32:59.457 回答