jQuery खोज और फ़िल्टर तालिका

Question

मैं एक jQuery प्लगइन की तलाश में था जो इनपुट मानों के अनुसार एक तालिका फ़िल्टर करेगा।

मैं पर आया, लेकिन मैं यह नहीं समझ सकता कि इसे पहले से मौजूद इनपुट बॉक्स के लिए कैसे काम करना है।

वर्तमान में यह मेरे लिए एक नया इनपुट फॉर्म बनाता है (जो मैं नहीं चाहता) लेकिन मैं इसे मौजूदा इनपुट बॉक्स के साथ उपयोग करने में सक्षम होना चाहता हूं जिसमें इनपुट सबमिट बटन है।

Answer 1

इस प्लग-इन-द-बॉक्स के साथ यह संभव नहीं है, जब तक कि आप इसके कोड में खोदें और इसे करने के लिए इसे संशोधित न करें।

खोज इनपुटबॉक्स स्वचालित रूप से अपने स्वयं के जावास्क्रिप्ट द्वारा उत्पन्न होता है और उस व्यवहार को बदलने के लिए कोई विकल्प नहीं है।

Answer 2

@Adam, प्लगइन से उत्पन्न टेक्स्ट फ़ील्ड के ऑनअप को फायर करने का प्रयास करें।

$(document).ready(function() { 
    $("#my_other_input").keyup(function(){ 
     $("#generated_fld").val($(this).val()).keyup(); 
    }) 
}); 

Answer 3

ऐसा लगता है कि समय आप के लिए आपके प्रश्न का उत्तर है: सबसे पहले, आप उस क्षेत्र (उपयोग फ़ायरबग) की आईडी पता करने के लिए, मान लें कि यह generated_fld है, तो कोड होगा जाने की जरूरत है। QuickSearch वास्तव में आपको खोज फ़ंक्शन को एक पूर्ववर्ती पाठ इनपुट बॉक्स में संलग्न करने की अनुमति देता है।

riklomas कहा गया है कि:

ध्यान दें कि उपयोग quicksearch के नवीनतम संस्करण में बदल गया है, कोड, पीछे की ओर संगत नहीं है फार्म और इनपुट किसी भी अधिक स्क्रिप्ट के द्वारा निर्माण नहीं कर रहे हैं।

मैंने अभी इसका उपयोग शुरू कर दिया है और ऐसा लगता है कि यह बहुत अच्छी तरह से काम करता है। ऐसा लगता है कि कम से कम मेरे परीक्षण पर्यावरण (फ़ायरफ़ॉक्स 3.6, ओएस एक्स, और एक बहुत बड़ा डेटा सेट) पर सीपीयू का हिस्सा है, लेकिन यह शायद इस विशेष प्लगइन के लिए अद्वितीय नहीं है।

Answer 4

मैं थोड़ी देर के लिए इस कोड का उपयोग कर रहा हूं। पहली:

1. इनपुट पाठ फ़ील्ड फिल्टर करने के लिए/खोज आईडी 'खोज'
2. वास्तव में यह सिर्फ प्रत्येक पंक्ति के प्रथम कक्ष का उपयोग, आप आसानी से विस्तार कर सकते हैं इस
(कोड पर टिप्पणी का पालन करें) है

कोड:

$('#search').on('input', function() { 
    var str = $('#search').val().toLowerCase(); 
    $("#containerTable tr").each(function (index, element) { 
     var label = $(this).find("td").eq(0).html().toLowerCase(); 
     //var labelx = $(this).find("td").eq(x).html().toLowerCase(); 
     //... 

     if (str == '' || label.indexOf(str) != -1) { 
      // || labelx.indexOf(str) != -1) ... 
      $(this).css("display", "table-row"); 
     } 
     else { 
      $(this).css("display", "none"); 
     } 
    });   
});