2011-08-30 9 views
8

मुझे क्रोम/वेबकिट 71305 बग द्वारा काटा जा रहा है जहां बड़ी संख्या में नोड्स को छिपाने से क्रोम लटका हुआ है। (सफारी में भी होता है)।लाइव फ़िल्टरिंग के लिए चारों ओर काम करें क्रोम में jQuery के साथ 1500+ आइटम

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

समय जावास्क्रिप्ट को निष्पादित करने में लगने वाला समय:

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

मार्कअप के स्निपेट:

मैं किसी सूची आइटम है कि निम्नलिखित के साथ एक ड्रॉप डाउन मेनू में होगा छानने हूँ नगण्य है ऐसा तब होता है जब क्रोम को input में पाठ को हटाने के बाद तत्वों को दोबारा हटाने की आवश्यकता होती है। एफएफ 6/आईई 7-9 में नहीं होता है। http://jsfiddle.net/uUk7S/17/show/

एक और दृष्टिकोण मैं छुपा और तत्वों है कि क्रोम लटका कारण नहीं दिखा के बजाय लेने के लिए कर सकते हैं:

मैं इस मुद्दे को वर्णन करने के लिए एक JSFiddle बनाया? मैंने क्लोन में प्रसंस्करण ul क्लोनिंग और क्लोन के साथ पूरी तरह से डीओएम में ul को प्रतिस्थापित करने की कोशिश की है, लेकिन मुझे उम्मीद है कि यह बेहतर तरीका है क्योंकि यह आईई में काफी धीमी है।

+0

आप 'span' तत्वों के लिए समापन ब्रैकेट खो रहे हैं। क्या यह कारण हो सकता है? –

+0

@ विलियम, यह सिर्फ एक गलती है जिसे मैंने विम में मार्कअप की सफाई करते समय बनाया था। मैं पहेली को ठीक कर दूंगा लेकिन मुद्दा अभी भी जारी रहेगा। (विशेष रूप से यह अन्य ब्राउज़रों में ठीक काम करता है)। – Soliah

उत्तर

7

क्या आपने तत्वों को छिपाने के लिए अन्य सीएसएस संभावना की कोशिश की है?

visibility के स्विच की तरह सीएसएस प्रोप का उपयोग करना? या height:auto और height:0;overflow-y:hidden; के बीच एक स्विच?

मैंने थोड़ा उदाहरण here बनाया, यह .css({"visibility":"visible","height":"auto"}); को दिखाने के लिए और ({"visibility":"hidden","height":"0"}) को छिपाने के लिए उपयोग कर रहा है। और ऐसा लगता है कि मैंने कुछ परीक्षणों में क्रोम में ठीक काम किया है।

संपादित करें: और भी बेहतर here, तो आप सिर्फ .css("visibility","visible"); और .css("visibility","hidden"); उपयोग करना होगा। li[style~="hidden;"]{height:0;} का उपयोग आपके लिए ऊंचाई संशोधन कर रहा है।

+0

ऊंचाई परिवर्तन वह दृष्टिकोण है जो मैं पोस्ट करने वाला था। मेरे लिए भी ठीक काम किया। –

+0

यह अच्छी तरह से काम करता है! ध्यान दें कि फ़िल्टर किए गए तत्वों में कोई भी 'पैडिंग' जोड़ा गया है, जिसे शैली में '0' पर भी सेट करने की आवश्यकता है। – Soliah

-1

असल में, आप खाली मूल्य <li> तत्व पर डाल सकते हैं। वह वास्तविकता केवल ठीक है मैं काम करने में सक्षम था। और जब आपको फिर से मूल्य की आवश्यकता होती है, तो इसे वापस रखें। या आप <li> हटा सकते हैं। लेकिन मैं AJAX का उपयोग करने के लिए इसके लिए अधिक पसंद करता हूं।

संबंधित मुद्दे