This article about the search functionality using the jQuery for your website. With just a few lines of code and a single text input box you can add a search box to any website content.
For example, we will create a search feature for a simple product list, although the same function can easily be applied to any elements by changing the selector.
To capture the search text, all we need is a simple input text field. To make the feature a little more exciting, we are also going to show the number of results underneath the text input. For this, we need to add a div tag with the ID – “result-count”.
<form id="live-search" action="" class="search-form" method="post">
<label>Search product</label>
<input type="text" class="text-input" id="searchbox" value="" />
<div id="result-count"></div>
</form>
Give the input field a unique ID since we will need this to capture the user’s text.
Our products list is structured using an ordered list.
<ol class="products"> <li>Product1</li> <li>Product2</li> <li>Product3</li> </ol>
The jQuery for this feature is relatively easy and all we are doing is getting the input text value checking this against our list of products and hiding those that do not contain the text phrase. The count of the number of positive results is then displayed in our “result-count” div tag.
Since this is a live search we will use the “keyup” event to initiate the function – the searched products list will therefore update with each character entered.
$("#searchbox").keyup(function(){
var filter = $(this).val(), count = 0;
$(".products li").each(function(){
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).fadeOut();
} else {
$(this).show();
count++;
}
});
var numberItems = count;
$("#result-count").text("Number of Results = "+count);
});
This jQuery live search functionality can be applied to any elements by changing the “.products li” selector.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Search Functionality Using jQuery</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#searchbox").keyup(function(){
var filter = $(this).val(), count = 0;
$(".products li").each(function(){
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).fadeOut();
} else {
$(this).show();
count++;
}
});
var numberItems = count;
$("#result-count").text("Number of Results = "+count);
});
});
</script>
</head>
<body>
<form id="live-search" action="" class="search-form" method="post">
<label>Search product</label>
<input type="text" class="text-input" id="searchbox" value="" />
<div id="result-count"></div>
</form>
<ol class="products">
<li>Product1</li>
<li>Product2</li>
<li>Product3</li>
<li>product1</li>
<li>product2</li>
<li>product3</li>
<li>product2</li>
<li>product1</li>
<li>Product3</li>
<li>Product4</li>
<li>Product5</li>
</ol>
</body>
</html>
Output:
Hello!
Great coding, interesting feature. It finds the lists that contain a word and is thereby counting the number of lists. It is very useful, but is there a way to also count the actual number of a word?
Cheers
Assalamu Alaikum, Hey Brother. I Have A Question.
If I Apply this method in a div that contains some text, it just count the div number. But Not the matched result.
For example, if i apply this class (class=”products”) in a div, where the word “Lorem” is mentioned for 10 times. It Just shows the “Number of Results 1” as there is only one div containing this word.
But How can I Show total founding results number………..?
Thats mean it will show “Number of Results 10” ???????
Please give me the code of this function. I am a novice in this section.
Thanks In Advance.