<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Filter list using javascript</title>
<style type="text/css">
#myInput{
background-image: url('img/search.png');
background-position: 0px 0px;
background-size: 40px;
background-repeat: no-repeat;
box-sizing: border-box;
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.header{
background-color: #e2e2e2;
cursor: default;
}
#myUl li a:hover:not(.header){
background-color: #eee;
}
</style>
</head>
<body>
<h2>ANIMALS</h2>
<input type="text" id="myInput" onkeyup="myFunction()"
placeholder="Search here...." title="Type in a name">
<ul id="myUl">
<li><a href="#" class="header">A</a></li>
<li><a href="#">Alligator</a></li>
<li><a href="#">Albatross</a></li>
<li><a href="#">Antelope</a></li>
<li><a href="#">Anaconda</a></li>
<li><a href="#" class="header">B</a></li>
<li><a href="#">Bear</a></li>
<li><a href="#">Baboon</a></li>
<li><a href="#">Blue Whale</a></li>
<li><a href="#" class="header">C</a></li>
<li><a href="#">Cheetah</a></li>
<li><a href="#">Chimpanzee</a></li>
<li><a href="#">Camel</a></li>
</ul>
<script type="text/javascript">
/* Declare varibles*/
function myFunction(argument) {
var input,filter,ul,li,a,i;
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 dont match the search query */
for(i=0; i<li.length;i++){
a=li[i].getElementsByTagName('a')[0];
if (a.innerHTML.toUpperCase().indexOf(filter)>-1) {
li[i].style.display='';
}else{
li[i].style.display="none";
}
}
}
</script>
</body>
</html>
Comments
Post a Comment