In this post I’m going to share a source code for performing quick search functionality using jQuery.
There is a text input and some divs. Just type a few characters then any div that doesn’t contain that characters disappear.
<!DOCTYPE html>
<html>
<head>
<title>ZK Tutorials</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<input id="searchinput" placeholder="Quick Search" onkeyup="quickSearch()">
<div class="listitem">Hello...</div>
<div class="listitem">how</div>
<div class="listitem">are</div>
<div class="listitem">you</div>
<script>
function quickSearch(){
var keyword = $("#searchinput").val();
keyword = keyword.toLowerCase();
if(keyword.length > 0){
for(var i = 0; i < $(".listitem").length; i++){
if($(".listitem")[i].innerHTML.toLowerCase().indexOf(keyword) > -1) $(".listitem")[i].style.display = "block";
else $(".listitem")[i].style.display = "none";
}
} else $(".listitem").css({ display : "block" });
}
</script>
</body>
</html>
Here is the live example:
Hello…
how
are
you