Obejmij filtrowanie na żywo 1500+ elementów z jQuery w przeglądarce Chrome

Zostałem ugryziony przez błąd Chrome/Webkit 71305, w którym ukrywanie dużej liczby węzłów powoduje zawieszanie się Chrome. (Występuje również w Safari).Obejmij filtrowanie na żywo 1500+ elementów z jQuery w przeglądarce Chrome

jestem filtrowania element listy, które będą znajdować się w menu rozwijanym z poniższym:

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

fragment znaczników:

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

Czas potrzebny dla Javascript, aby wykonać jest znikome. Chodzi o to, kiedy Chrome musi przerysować elementy po usunięciu tekstu z zawieszonej w nim wersji. Nie występuje w FF6/IE7-9.

Zrobiłem JSFiddle do zilustrowania problemu: http://jsfiddle.net/uUk7S/17/show/

Czy istnieje inne podejście mogę wziąć zamiast ukrywanie i pokazywanie elementów, które nie spowodują Chrome powiesić? Próbowałem klonowania ul, przetwarzania w klonie i zastępowania w całości klonem DOM, ale mam nadzieję, że jest lepszy sposób, ponieważ jest znacznie wolniejszy w IE.

Źródło

2011-08-30 Soliah

brakuje nawiasu zamykającego dla elementów "span". czy to mogła być przyczyna? –

@William, to tylko błąd, który popełniłem podczas czyszczenia znaczników w Vimie. Naprawię skrzypce, ale problem nadal będzie występował. (Zwłaszcza, że działa dobrze w innych przeglądarkach). – Soliah

Czy próbowałeś innej możliwości css do ukrycia elementów?

Korzystanie z rekwizytów css, takich jak przełącznik visibility? Lub przełącznik między height:auto i height:0;overflow-y:hidden;?

Zrobiłem mały przykład here, używa się .css({"visibility":"visible","height":"auto"}); do pokazania i ({"visibility":"hidden","height":"0"}) do ukrycia. I wydaje się, że działa dobrze w chromie w kilku testach, które zrobiłem.

EDIT: Nawet lepiej here, po prostu trzeba użyć .css("visibility","visible"); i .css("visibility","hidden");. Użycie funkcji li[style~="hidden;"]{height:0;} powoduje zmianę wysokości.

Źródło

2011-08-30 06:48:42

Zmiana wysokości to podejście, które zamierzałem opublikować. Sprawdziło się również dla mnie. –

To działa dobrze! Należy pamiętać, że jeśli do filtrowanych elementów dodano "dopełnienie", to musi ono być również ustawione na "0" w stylu. – Soliah

-1

Rzeczywiście, można umieścić pustą wartość elementu <li>. To jest tylko poprawka, dzięki której mogłem pracować. A kiedy potrzebujesz ponownie wartości, odłóż ją. Lub możesz usunąć <li>. Ale wolę to, aby używać AJAX.

Źródło

2011-08-30 06:48:04

Obejmij filtrowanie na żywo 1500+ elementów z jQuery w przeglądarce Chrome

Odpowiedz

Powiązane problemy