JavaScript से फिल्टर लिस्ट कैसे बनाएं?

JavaScript का उपयोग करके एक फिल्टर लिस्ट (खोज/फ़िल्टर करने योग्य सूची) बनाने का पूरा कोड नीचे दिया गया है।

उदाहरण

<!DOCTYPE html> 
<html> 
<head> 
  <meta name="viewport" content="width=device-width, initial-scale=1" /> 
  <style> 
    * { box-sizing: border-box; } 
    .searchInput { 
      width: 100%; 
      font-size: 16px; 
      padding: 12px 20px 12px 40px; 
      border: 2px solid grey; 
      margin-bottom: 12px; 
    } 
    .animalUL { 
      list-style-type: none; 
      padding: 0; 
      margin: 0; 
    } 
    .animalUL li a { 
      border-top: 1px solid rgb(0, 0, 0); 
      margin-top: -1px; 
      background-color: #f6f6f6; 
      padding: 12px; 
      text-decoration: none; 
      font-size: 18px; 
      color: black; 
      display: block; 
    } 
    .animalUL li a:hover:not(.header) { 
      background-color: #eee; 
    } 
  </style> 
</head> 
<body> 
  <h1>फिल्टर लिस्ट उदाहरण</h1> 
  <input type="text" class="searchInput" onkeyup="filterFunction()" placeholder="जानवर खोजें" title="नाम टाइप करें"/> 
  <ul class="animalUL"> 
    <li><a href="#">बिल्ली</a></li> 
    <li><a href="#">चीता</a></li> 
    <li><a href="#">कुत्ता</a></li> 
    <li><a href="#">जिराफ</a></li> 
    <li><a href="#">शेर</a></li> 
    <li><a href="#">तेंदुआ</a></li> 
    <li><a href="#">लामा</a></li> 
  </ul> 
  <script> 
    function filterFunction() { 
      var input, filter, ul, li, a, i, value; 
      input = document.querySelector(".searchInput"); 
      filter = input.value.toUpperCase(); 
      ul = document.querySelector(".animalUL"); 
      li = ul.getElementsByTagName("li"); 
      for (i = 0; i < li.length; i++) { 
        a = li[i].getElementsByTagName("a")[0]; 
        value = a.textContent || a.innerText; 
        if (value.toUpperCase().indexOf(filter) > -1) { 
          li[i].style.display = ""; 
        } else { 
          li[i].style.display = "none"; 
        } 
      } 
    } 
  </script> 
</body> 
</html>

आउटपुट

उपरोक्त कोड निम्नलिखित आउटपुट उत्पन्न करेगा:

सर्च फील्ड में कुछ टाइप करने पर:

कैसे काम करता है:

1. इनपुट इवेंट - onkeyup पर फिल्टर फंक्शन ट्रिगर होता है
2. केस-इनसेंसिटिव - toUpperCase() से तुलना
3. सबस्ट्रिंग मैच - indexOf() > -1 से आंशिक मैच
4. दिखाना/छुपाना - display: "" (दिखाएं) या display: "none" (छुपाएं)

आधुनिक दृष्टिकोण (ES6+):

const searchInput = document.querySelector('.searchInput');
const items = document.querySelectorAll('.animalUL li');

searchInput.addEventListener('input', (e) => {
  const filter = e.target.value.toLowerCase().trim();
  
  items.forEach(item => {
    const text = item.textContent.toLowerCase();
    item.style.display = text.includes(filter) ? '' : 'none';
  });
});

उन्नत फीचर्स जोड़ें:

• हाइलाइटिंग - मैचिंग टेक्स्ट को हाइलाइट करें
• डिबाउंस - तेज टाइपिंग पर परफॉरमेंस के लिए
• नो रिजल्ट्स मैसेज - जब कोई मैच न मिले
• कैटेगरी फिल्टर - मल्टीपल फिल्टर कॉम्बिनेशन
• कीबोर्ड नेविगेशन - Arrow keys से चुनें, Enter से सेलेक्ट

डिबाउंस उदाहरण:

function debounce(func, delay) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

const debouncedFilter = debounce(filterFunction, 300);
searchInput.addEventListener('input', debouncedFilter);

प्रदर्शन नोट:

बड़ी लिस्ट्स (1000+ आइटम्स) के लिए, DOM मैनिपुलेशन के बजाय वर्चुअल लिस्ट या DocumentFragment का उपयोग करें।