<!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
Country State City Drop Down in jQuery, AJAX
Dynamically Dependent country state city drop down box using jQuery, Ajax and PHP: This is commonly …
AJAX Post With jQuery and PHP
AJAX stands for Asynchronous JavaScript and XML. AJAX Post used to create faster, and more interacti…
How a Loop Through a JavaScript Object?
How a Loop through a JavaScript object?Javascript Objects are Variables Containing Variables.In Java…
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 …