Funziona in giro per filtrare in tempo reale 1500+ articoli con jQuery in Chrome

Question

Sono stato morso dal bug di Chrome/Webkit 71305 in cui non nascondere un numero elevato di nodi causa il blocco di Chrome. (Si verifica anche in Safari).

sto filtraggio una voce di elenco che sarà in un menu a discesa con il seguente:

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

frammento del markup:

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

Il tempo necessario per il Javascript da eseguire è trascurabile. È quando Chrome ha bisogno di ridisegnare gli elementi dopo aver eliminato il testo nel input che si blocca. Non succede in FF6/IE7-9.

Ho fatto una JSFiddle per illustrare il problema: http://jsfiddle.net/uUk7S/17/show/

C'è un altro approccio che posso prendere, piuttosto che nascondere e mostrare gli elementi che non causano Chrome da appendere? Ho provato a clonare il ul, l'elaborazione nel clone e sostituire il ul nel DOM completamente con il clone, ma spero che ci sia un modo migliore in quanto questo è significativamente più lento in IE.

Answer 1

Hai provato altre possibilità di css per nascondere gli elementi?

Utilizzo di puntelli CSS come uno switch di visibility? Oppure un passaggio tra height:auto e height:0;overflow-y:hidden;?

Ho fatto un piccolo esempio here, sta usando .css({"visibility":"visible","height":"auto"}); da mostrare e ({"visibility":"hidden","height":"0"}) da nascondere. E sembra funzionare bene in cromo nei pochi test che ho fatto.

EDIT: Ancora meglio here, basta utilizzare .css("visibility","visible"); e .css("visibility","hidden");. L'uso di li[style~="hidden;"]{height:0;} sta eseguendo la modifica dell'altezza per te.

Answer 2

In realtà, è possibile inserire il valore vuoto nell'elemento <li>. In realtà è solo una correzione che sono riuscito a lavorare. E quando hai ancora bisogno di valore, rimettilo. Oppure puoi rimuovere <li>. Ma preferisco di più usare l'AJAX.