在Chrome中使用jQuery实时过滤1500+项

Question

我被Chrome/Webkit 71305 bug咬了，其中取消隐藏大量节点导致Chrome挂起。(也出现在Safari中)。

我正在过滤一个列表项，该列表项将在下拉菜单中包含以下内容:

jQuery.expr[':'].Contains = function(a, i, m) {
    return $.trim((a.textContent || a.innerText || "")).toUpperCase().indexOf(m[3].toUpperCase()) == 0;
};
var input = $('input');
var container = $('ul');
input.keyup(function(e) {
    var filter = $.trim(input.val());
    if (filter.length > 0) {
        // Show matches.
        container.find("li:Contains(" + filter + ")").css("display", "block");
        container.find("li:not(:Contains(" + filter + "))").css("display", "none");
    }
    else {
        container.find('li').css("display", "block");
    }
});

标记的代码片段:

<input type="text" />
<ul>  
    <li>
        <div>
            <span title="93252"><label><input type="checkbox">3G</label></span>
        </div>
    </li>
</ul>

执行Javascript所需的时间可以忽略不计。这是当Chrome需要在删除input的文本后重新绘制元素，它挂起。在FF6/IE7-9中不会发生。

我做了一个JSFiddle来说明这个问题:http://jsfiddle.net/uUk7S/17/show/

是否有另一种方法，我可以采取而不是隐藏和显示不会导致Chrome挂起的元素?我曾尝试克隆ul，在克隆中处理并完全用克隆替换DOM中的ul，但我希望有更好的方法，因为这在IE中明显较慢。

Answer 1

您是否尝试过其他隐藏元素的css可能性?

使用css道具像开关的visibility ?或者在height:auto和height:0;overflow-y:hidden;之间切换?

我在这里做了一个小例子，它使用.css({"visibility":"visible","height":"auto"});显示和({"visibility":"hidden","height":"0"})隐藏。在我做的几个测试中，它似乎在chrome中工作得很好。

EDIT:这里甚至更好，你只需要使用.css("visibility","visible");和.css("visibility","hidden");。使用li[style~="hidden;"]{height:0;}为您做高度修改

Answer 2

实际上，您可以为<li>元素设置空值。这是我唯一能解决的问题。当你再次需要价值时，把它放回去。或者您可以删除<li>。但是我更喜欢使用AJAX