कैसे सूची/सर्च फ़िल्टर करें

कैसे JavaScript से फ़िल्टर सूची बनाएं।

सर्च सूची बनाएं

पहला कदम - HTML जोड़ें:

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<ul id="myUL">
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>
  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>
  <li><a href="#">Calvin</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Cindy</a></li>
</ul>

ध्यान दें:इस प्रदर्शन में हम href="#" का उपयोग करते हैं क्योंकि हमें कोई पृष्ठ लिंक करने के लिए नहीं है। वास्तविक आवेदन में यह वास्तविक URL का संदर्भ देना चाहिए。

दूसरा कदम - CSS जोड़ें:

इनपुट एलेमेंट और सूची की शैली नियत करें:

#myInput {
  background-image: url('/css/searchicon.png'); /* इनपुट बॉक्स में सर्च आइकन जोड़ें */
  background-position: 10px 12px; /* सर्च आइकन को स्थानांतरित करें */
  background-repeat: no-repeat; /* इमेज दोहराने को नहीं करें */
  width: 100%; /* पूरे चौड़ाई */
  font-size: 16px; /* फ़ॉन्ट आकार बढ़ाएं */
  padding: 12px 20px 12px 40px; /* कुछ आंतरिक पैडिंग जोड़ें */
  border: 1px solid #ddd; /* ग्रे बॉर्डर जोड़ें */
  margin-bottom: 12px; /* इनपुट बॉक्स के नीचे कुछ जगह जोड़ें */
}
#myUL {
  /* मूवैया सूची शैली हटाएं */
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#myUL li a {
  border: 1px solid #ddd; /* सभी लिंकों को बॉर्डर जोड़ें */
  margin-top: -1px; /* दोहरे बॉर्डर से बचने के लिए */
  background-color: #f6f6f6; /* रंगीन पृष्ठभूमि रंग जोड़ें */
  padding: 12px; /* कुछ इनर पैडिंग जोड़ें */
  text-decoration: none; /* डिफ़ॉल्ट टेक्स्ट नीचे डालें */
  font-size: 18px; /* फ़ॉन्ट आकार बढ़ाएं */
  color: black; /* श्वेत लेखाकृति जोड़ें */
  display: block; /* इसे बॉक्स इलेमेंट बनाएं ताकि यह पूरी सूची भरे */
}
#myUL li a:hover:not(.header) {
  background-color: #eee; /* सभी लिंकों (शीर्षक को छोड़कर) नहरदेशन का असर दें */
}

तीसरा चरण - JavaScript जोड़ें

<script>
function myFunction() {
  // वेरियेबल्स घोषित करें
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById('myInput');
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName('li');
  // सभी सूची आइटमों को दौर करें और उनको छुपाएं जो खोजी पूछताछ से मेल नहीं खाते
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    यदि (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } अन्यथा {
      li[i].style.display = "none";
    }
  }
}
</script>

खुद साफली प्रयोग कीजिए

सूचना:यदि आप बड़ा छोटा फ़ाइल्टरिंग करना चाहते हैं, तो toUpperCase() हटाएं।

संबंधित पृष्ठ

तालीम:कैसे करें: तालिका को फ़िल्टर करना/खोजना