in this tutorial, I will show you how to filter your list element using Search Bar in JavaScript
Source Code
-HTML
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<h1>Filter search</h1>
<input id="search" onkeyup="filter()" type="text" placeholder="Search">
<ul id="Menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">SQL</a></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">Node.js</a></li>
</ul>
</div>
<script src="filter.js" type="text/javascript"></script>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css?family=Nunito&display=swap');
*{
margin: 0;
padding: 0;
outline: 0;
font-family: 'Nunito',sans-serif;
}
body{
background-color:#e8eaf6;
}
.container{
padding: 15px;
border-radius: 5px;
background-color: #fff;
width: 30%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
text-align:center;
box-shadow: 0 6px 8px rgba(0,0,0,.1);
transition: all .4s;
}
.container h1{
text-transform: uppercase;
margin-bottom: 15px;
color: #4686f6;
}
.container input{
padding: 10px 15px;
margin-bottom: 15px;
width: calc(100% - 30px);
font-size: 18px;
}
.container ul li{
list-style-type: none;
padding: 15px 0;
background-color: #cfd8dc;
transition: .4s;
}
.container ul a{
color: #212121;
text-decoration: none;
}
JavaScript
function filter(){
var filterValue, input, ul,li,a,i;
input = document.getElementById("search");
filterValue = input.value.toUpperCase();
ul = document.getElementById("Menu");
li = ul.getElementsByTagName("li");
for (i = 0 ; i < li.length ; i++){
a = li[i].getElementsByTagName("a")[0];
if(a.innerHTML.toUpperCase().indexOf(filterValue) > -1){
li[i].style.display = "";
}else{
li[i].style.display = "none";
}
}
}
Search Filter List Using JavaScript
Reviewed by Medics
on
August 05, 2019
Rating:
Reviewed by Medics
on
August 05, 2019
Rating:
Thanks body!!!! I am a noob and i need help!!! im glad you share this
ReplyDeleteHow replace keywords in "li" by Cell Table in Google Sheets?
ReplyDeleteI want replace keywords with import to table in google sheets.
Thank You
how do you display it none?
ReplyDeletecopy past from w3school
ReplyDeletecopy paste from w3school.com
ReplyDelete