<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
* {
box-sizing: border-box;


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;

<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>

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);



Leave comment

Your email address will not be published. Required fields are marked with *.