Javascript 解决实时过滤1500+；在Chrome中使用jQuery的项

我被Chrome/Webkit的bug咬了一口，在这个bug中，取消隐藏大量节点会导致Chrome挂起。（也发生在狩猎中）

我正在筛选下拉菜单中的列表项，其中包含以下内容：

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>

3G

Javascript执行所需的时间可以忽略不计。当Chrome删除

输入中的文本后需要重新绘制元素时，它将挂起。不会发生在FF6/IE7-9中

我做了一个JSFiddle来说明这个问题：

除了隐藏和显示不会导致Chrome挂起的元素外，还有其他方法可以使用吗？我尝试过克隆
ul
，在克隆中进行处理，并用克隆完全替换DOM中的
ul
，但我希望有更好的方法，因为这在IE中要慢得多。
实际上，您可以将空值放入
元素。事实上，这是我唯一能解决的问题。当你再次需要价值时，把它放回去。或者您可以删除
。但是我更倾向于使用AJAX。
您是否尝试过其他css方法来隐藏元素

使用css道具，比如切换
可见性
？
或者在
高度：自动
和
高度：0之间切换；溢出y：隐藏

我举了一个小例子，它使用
.css（{“可见性”：“可见”，“高度”：“自动”}）
显示和
（{“可见性”：“隐藏”，“高度”：“0”}）
隐藏。在我做的几次测试中，它似乎在chrome中运行良好

编辑：更好的是，您只需使用
.css（“可见性”、“可见”）
和
.css（“可见性”、“隐藏”）。使用
li[style~=“hidden；”]{height:0；}
正在为您修改高度。
您缺少
span
元素的右括号。这可能是原因吗？@William，这只是我在清理Vim中的标记时犯的一个错误。我会修好小提琴，但问题仍然会存在。（特别是因为它在其他浏览器中工作得很好）高度变化是我即将发布的方法。对我来说也很好。这个效果很好！应该注意，如果有任何
填充
添加到筛选的元素中，则还需要在样式中将其设置为
0
。