使用Chrome中的jQuery实时过滤1500多个项目

我被Chrome / Webkit 71305错误所困扰 ，其中隐藏了大量节点会导致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"); } }); 

标记的片段：

  
 
 
 3G 
 
  

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;之间切换height:0;overflow-y:hidden; ？

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

编辑： 在这里更好，你只需要使用.css("visibility","visible"); 和.css("visibility","hidden"); 。 使用li[style~="hidden;"]{height:0;}正在为您进行高度修改。

Answer 2

Actualy，你可以将空值放到

元素。 那个实际只是修复我能够工作。 当你再次需要价值时，把它放回去。 或者你可以删除

。 但我更喜欢使用AJAX。