बूटस्ट्रैप 4 फ़िल्टर (उन्नत)
बूटस्ट्रैप 4 फ़िल्टर
बूटस्ट्रैप में एक घटक नहीं है जो फ़िल्टरिंग की अनुमति देता है। हालाँकि, हम तत्वों को फ़िल्टर / खोजने के लिए jQuery का उपयोग कर सकते हैं।
फ़िल्टर टेबल
किसी तालिका में आइटम्स के लिए केस-असंवेदनशील खोज करें:
उदाहरण
Type something in the input field to search the table for first names, last names or emails:
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
| Anja | Ravendale | [email protected] |
jQuery
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var
value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
उदाहरण समझाया गया है: हम प्रत्येक तालिका पंक्तियों के माध्यम से लूप करने के लिए jQuery का उपयोग यह जांचने के लिए करते हैं कि इनपुट फ़ील्ड के मान से मेल खाने वाला कोई टेक्स्ट मान है या नहीं। toggleविधि उस पंक्ति ( ) को छुपाती है जो display:noneखोज से मेल नहीं खाती। हम toLowerCase()टेक्स्ट को लोअर केस में बदलने के लिए विधि का उपयोग करते हैं, जो खोज केस को असंवेदनशील बनाता है ("जॉन", "जॉन" और यहां तक कि "जॉन" को खोज पर अनुमति देता है)।
फ़िल्टर सूचियाँ
सूची में आइटम के लिए केस-असंवेदनशील खोज करें:
उदाहरण
Type something in the input field to search the list for items:
- First item
- Second item
- Third item
- Fourth
कुछ भी फ़िल्टर करें
एक div तत्व के अंदर टेक्स्ट के लिए केस-असंवेदनशील खोज करें:
उदाहरण
I am a paragraph.
Another paragraph.