Use live filtering of over 1,500 items with jQuery in Chrome.

Question

I am being bitten by the Chrome / Webkit 71305 error , where hiding a large number of nodes causes Chrome to freeze. (Also happening in Safari).

I am filtering the list item that will be in the drop-down menu with the following:

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"); } }); 

Partition markup:

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

The time required to execute Javascript is negligible. This is when Chrome should redraw the elements after deleting the text in the input that it hangs. Does not occur in FF6 / IE7-9.

I did a JSFiddle to illustrate the problem: http://jsfiddle.net/uUk7S/17/show/

Is there any other approach that I can take instead of hiding and showing elements that cannot damage Chrome? I tried to clone ul by processing in the clone and completely replacing ul in the DOM with the clone, but I hope that there will be a better way, since it is much slower in IE.

Answer 1

Have you tried using other css features to hide elements?

Using css details like visibility switch? Or a switch between height:auto and height:0;overflow-y:hidden; ?

I made a small example here using .css({"visibility":"visible","height":"auto"}); to display and ({"visibility":"hidden","height":"0"}) to hide. And that seems to work fine in chrome in a few tests that I did.

EDIT: Even better here , you just need to use .css("visibility","visible"); and .css("visibility","hidden"); . Using li[style~="hidden;"]{height:0;} performs a height change for you.

Answer 2

In fact, you can put an empty value in the <li> element. In fact, this only fix, I was able to work. And when you need the value again, return it. Or you can remove the <li> . But I prefer using AJAX for this.