कैसे करें - फ़िल्टर/खोज सूची
जावास्क्रिप्ट के साथ फ़िल्टर सूची बनाने का तरीका जानें।
फ़िल्टर सूची
किसी सूची में आइटम खोजने के लिए जावास्क्रिप्ट का उपयोग कैसे करें।
एक खोज सूची बनाएं
चरण 1) 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 होना चाहिए।
चरण 2) सीएसएस जोड़ें:
इनपुट तत्व और सूची को स्टाइल करें:
उदाहरण
#myInput {
background-image: url('/css/searchicon.png');
/* Add a search icon to input */
background-position:
10px 12px; /* Position the search icon */
background-repeat: no-repeat; /* Do not repeat the icon image */
width: 100%; /* Full-width */
font-size: 16px; /*
Increase font-size */
padding: 12px 20px 12px 40px; /*
Add some padding */
border: 1px solid #ddd; /* Add a
grey border */
margin-bottom: 12px; /* Add some space
below the input */
}
#myUL {
/* Remove default list styling */
list-style-type:
none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd; /* Add a border to all links */
margin-top: -1px; /* Prevent double borders */
background-color: #f6f6f6; /* Grey background color */
padding: 12px; /* Add some padding */
text-decoration:
none; /* Remove default text underline */
font-size:
18px; /* Increase the font-size */
color: black; /*
Add a black text color */
display: block; /* Make it
into a block element to fill the whole list */
}
#myUL
li a:hover:not(.header) {
background-color: #eee; /*
Add a hover effect to all links, except for headers */
}
चरण 3) जावास्क्रिप्ट जोड़ें:
उदाहरण
<script>
function myFunction() {
// Declare variables
var input, filter,
ul, li, a, i, txtValue;
input = document.getElementById('myInput');
filter = input.value.toUpperCase();
ul =
document.getElementById("myUL");
li =
ul.getElementsByTagName('li');
// Loop through all
list items, and hide those who don't match the search query
for (i = 0; i <
li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
}
else {
li[i].style.display = "none";
}
}
}
</script>
युक्ति: यदि आप केस-संवेदी खोज करना चाहते हैं तो toUpperCase() निकालें ।
युक्ति: फ़िल्टर तालिका भी देखें ।