2011-08-30 9 views
8

Chrome/Webkit 71305 hatasından ısırıldığım için çok sayıda düğümün Chrome'un askıda kalmasına neden oluyor. (Ayrıca Safari'de gerçekleşir). biçimlendirmeCanlı filtreleme için yaklaşık 1500'den fazla ürünü Chrome'da jQuery ile çalışın

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

Snippet'ine:

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

JavaScript çalıştırmak için geçen zamanı

aşağıdaki ile açılır menü olacak bir liste öğesini filtreleme am ihmal edilebilir. Chrome'un input'daki metni sildikten sonra öğeleri sildikten sonra yeniden çizmesi gerekiyor. FF6/IE7-9'da olmaz. http://jsfiddle.net/uUk7S/17/show/

Ben gizleme ve Chrome askıda kalmasına neden olmaz unsurları göstermek yerine alabilir başka bir yaklaşım var mı:

Sorunu göstermek için bir JSFiddle yaptı? ul klonlama işlemini klonlamada ve DOM'de ul'u tamamen klonla değiştirmeyi denedim, ancak IE'de önemli ölçüde daha yavaş olduğu için daha iyi bir yol olduğunu umuyorum.

+0

"span" öğeleri için kapatma dirseğini kaçırıyorsunuz. Sebebi bu olabilir mi? –

+0

@William, bu sadece Vim'deki işaretlemeyi temizlerken yaptığım bir hata. Kemanı tamir edeceğim ama sorun hala devam edecek. (Özellikle diğer tarayıcılarda iyi çalıştığından). – Soliah

cevap

7

Öğeleri gizlemek için diğer css olasılığını denediniz mi?

Css, visibility anahtarını kullanarak nasıl kullanılır? Veya height:auto ve height:0;overflow-y:hidden; arasında bir geçiş?

Küçük bir örnek oluşturdum here, göstermek için .css({"visibility":"visible","height":"auto"}); kullanıyor ve ({"visibility":"hidden","height":"0"}) saklamak için. Ve yaptığım birkaç testte kromda iyi çalışıyor gibi görünüyor.

DÜZENLEME:here, sadece .css("visibility","visible"); ve .css("visibility","hidden"); kullanmak zorunda bile daha iyi. li[style~="hidden;"]{height:0;} kullanımı sizin için yükseklik değiştirmeyi yapıyor.

+0

Yükseklik değişimi, yayınlamak üzere olduğum yaklaşımdır. Benim için de iyi çalıştı. –

+0

Bu iyi çalışıyor! Filtre uygulanmış öğelere eklenmiş herhangi bir "dolgu" varsa, bunun da stilde "0" olarak ayarlanması gerektiğini unutmayın. – Soliah

-1

Aslında, <li> öğeye boş değer koyabilirsiniz. Gerçek şu ki, çalışabiliyordum. Ve tekrar değere ihtiyacın olduğunda, onu geri koy. Ya da <li>'u kaldırabilirsiniz. Ama bunun için daha çok AJAX'ı kullanıyorum.