हेल्लो दोस्तों, आज हम अपने इस पोस्ट के माध्यम से Data Filter List Project को बनायेंगे जो कि सिर्फ HTML CSS एवं Java Code से बना है इस Project के माध्यम से दिए गए Day List में आप किसी भी दिन का नाम English में Search Box में Type करेंगे तो उस दिन का नाम फ़िल्टर हो कर आ जायेगा यह एक Demo है यदि आप चाहे तो अपने अनुसार कोई भी नाम लिख सकते है
Data Filter List Project Demo
नीचे दिए गए Demo में आप देख सकते है की यह Project किस तरह से काम करता है
Data Filter List Project CSS Code
आप नीचे दिए गए CSS Code में डाटा फ़िल्टर लिस्ट के कलर बैकग्राउंड कलर पैडिंग मार्जिन एवं लिस्ट के बैकग्राउंड में अपने अनुसार संशोधन कर सकते है
#myInput {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi26QbkgyuA-h_htQyVmdsKAkfLvdcxA1sb0qh2KzcXL3Anz8fvVIlB9QKAVy2Zf5b754c_fldV1AmaljTKmrfifYbugMvRbsO4e0Q-A0e2LL12h1OwCX7fEgB7Y515SumafA7X8qUr-UA/s0/Advice+Sathi+Search.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #fd7e14;
margin-bottom: 12px;
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #fd7e14;
margin-top: -1px; /* Prevent double borders */
background-color: #ffc107a6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block
}
#myUL li a:hover:not(.header) {
background-color: #ffc107;
}
Data Filter List Project HTML Code
नीचे दिए गए HTML Code में आप डाटा फ़िल्टर लिस्ट के दिन के नाम को अपने अनुसार नाम लिख कर # की जगह पर अपना कोई लिंक पेस्ट कर सकते है
<h2>Data Filter List</h2>
</center>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<ul id="myUL">
<li><a href="#">Monday</a></li>
<li><a href="#">Tuesday</a></li>
<li><a href="#">Wednesday</a></li>
<li><a href="#">Thursday</a></li>
<li><a href="#">Friday</a></li>
<li><a href="#">Saturday</a></li>
<li><a href="#">Sunday</a></li>
</ul>
Data Filter List Project Java Code
अब नीचे दिए गए Java Code को लिखना है जिसके माध्यम से फ़िल्टर काम करेगा
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;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
उपरोक्त सभी कोड को Compile करने पर Data Filter List का Project तैयार हो चुका है यदि आप चाहे तो नीचे दिए गए Copy Code वाले बटन पर Click करके Data Filter List Project के Source Code को Copy कर सकते है