Redondea el filtrado en vivo de más de 1500 elementos con jQuery en Chrome

Me pica el error Chrome/Webkit 71305 que al ocultar un gran número de nodos provoca la detención de Chrome. (También ocurre en Safari).Redondea el filtrado en vivo de más de 1500 elementos con jQuery en Chrome

estoy filtrar un elemento de la lista que estará en un menú desplegable con lo siguiente:

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

de fragmentos del marcado:

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

El tiempo que tarda el Javascript para ejecutar es despreciable. Es cuando Chrome necesita volver a dibujar los elementos después de eliminar el texto en el input que cuelga. No sucede en FF6/IE7-9.

hice un jsFiddle para ilustrar el tema: http://jsfiddle.net/uUk7S/17/show/

¿Hay otro enfoque que puede tomar en lugar de ocultar y mostrar los elementos que no causarán Chrome para colgar? He intentado clonar el ul, procesando en el clon y reemplazando el ul en el DOM por completo con el clon, pero espero que haya una forma mejor ya que esto es mucho más lento en IE.

Fuente

2011-08-30 Soliah

le falta el soporte de cierre para los elementos 'span'. ¿Podría ser la causa? –

@William, es solo un error que cometí al limpiar el marcado en Vim. Arreglaré el violín pero el problema persistirá. (Especialmente porque funciona bien en los otros navegadores). – Soliah

¿Has probado otras posibilidades de css para ocultar los elementos?

¿Cómo usar accesorios css como un interruptor de visibility? O un interruptor entre height:auto y height:0;overflow-y:hidden;?

Hice un pequeño ejemplo here, está usando .css({"visibility":"visible","height":"auto"}); para mostrar y ({"visibility":"hidden","height":"0"}) para ocultar. Y parece funcionar bien en Chrome en las pocas pruebas que hice.

EDIT: Aún mejor here, sólo hay que utilizar .css("visibility","visible"); y .css("visibility","hidden");. El uso de li[style~="hidden;"]{height:0;} está haciendo la modificación de altura para usted.

Fuente

2011-08-30 06:48:42

El cambio de altura es el enfoque que estaba a punto de publicar. Funcionó bien para mí también. –

¡Esto funciona bien! Debe tenerse en cuenta que si se agrega 'relleno 'a los elementos filtrados, también se debe establecer en' 0' en el estilo. – Soliah

-1

Actualmente, puede poner el valor vacío en el elemento <li>. Esa realidad es solo una solución, pude trabajar. Y cuando necesites valor nuevamente, vuelve a colocarlo. O puede eliminar <li>. Pero prefiero eso, usar AJAX.

Fuente

2011-08-30 06:48:04

Redondea el filtrado en vivo de más de 1500 elementos con jQuery en Chrome

Respuesta

Cuestiones relacionadas