<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
#search{
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;
}
.sideBar {
list-style-type: none;
padding: 0;
margin: 0;
}
.sideBar .sideBar-body a {
border: 1px solid #ddd;
margin-top: -1px;
background-color: #f6f6f6;
padding: 13px;
text-decoration: none;
font-size: 16px;
color: black;
display: block
}
.sideBar .sideBar-body a:hover:not(.header) {
background-color: #eee;
}
</style>
</head>
<body>
<h2>Search item in list</h2>
<input type="text" id="myInput" placeholder="Search for country" >
<div class="sideBar">
<div class="row sideBar-body"><a href="#">India</a></div>
<div class="row sideBar-body"><a href="#">Russia</a></div>
<div class="row sideBar-body"><a href="#">Burma</a></div>
<div class="row sideBar-body"><a href="#">Myanmar</a></div>
<div class="row sideBar-body"><a href="#">Bhutan</a></div>
<div class="row sideBar-body"><a href="#">England</a></div>
</div>
<script>
function filterDivs() {
var input, filter, div, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
di = document.getElementsByClassName("sideBar");
li = document.getElementsByClassName("sideBar-body");
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";
}
}
}
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById("myInput").addEventListener("keyup", filterDivs);
});
</script>
</body>
</html>
How to Search Item in List in JavaScript
Multi Step Form Using HTML and JavaScript
Form is the important part in web design. Form is the primary interface to the user by which user is…
How to Create Custom CSS, jQuery Autocomplete Plugin
Web developers often use autocomplete features in websites as a part of their work. Yet lot of good …
How to Make Sticky Sidebar Using jQuery and CSS
Sticky sidebar is an essential part of web development. Not in all cases but for some cases where ou…
Selectors, Animation, and AJAX – jQuery Tutorial And Examples
By now I’m sure you have grasped at least the basics and simplicity of the jQuery library. Now it’s …
s3Slider jQuery Plugin & Tutorial
The s3Slider jQuery plugin is made by example of jd`s smooth slide show script. Usage: HTML: Sample …