Themeforest

Live Text Search Function Using jQuery

Today we are going to look at using jQuery to create a “live search” feature for your website. With just a few lines of code and a single text input box you can add a text filter to any site content.

For the tutorial we will create a search feature for our blog comments, although the same function can easily be applied to any elements by changing the selector.

The Search Box HTML

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 – “filter-count”

<form id="live-search" action="" class="styled" method="post">
    <fieldset>
        <input type="text" class="text-input" id="filter" value="" />
        <span id="filter-count"></span>
    </fieldset>
</form>

Give the input field a unique ID since we will need this to capture the users text.

The Comments List

Our comments list is structured using an ordered list – e.g.

<ol class="commentlist">
  <li>Comment #1</li>
  <li>Comment #2</li>
</ol>

The jQuery Code

The jQuery for this feature is relatively easy and all we are doing is basically getting the input text value, checking this against our list of comments and hiding those that do not contain the text phrase. The count of the number of positive results is then displayed in our “filter-count” span tag.

Since this is a “live” search we will use the “keyup” event to initiate the function – the filtered comment list will therefore update with each character entered.

$(document).ready(function(){
	$("#filter").keyup(function(){

		// Retrieve the input field text and reset the count to zero
		var filter = $(this).val(), count = 0;

		// Loop through the comment list
		$(".commentlist li").each(function(){

			// If the list item does not contain the text phrase fade it out
			if ($(this).text().search(new RegExp(filter, "i")) < 0) {
				$(this).fadeOut();

			// Show the list item if the phrase matches and increase the count by 1
			} else {
				$(this).show();
				count++;
			}
		});

		// Update the count
		var numberItems = count;
		$("#filter-count").text("Number of Comments = "+count);
	});
});

This jQuery live search can be applied to any elements by changing the “.commentlist li” selector.

View jQuery Demo

The live text search is also used on all of our blog comments.

9 Comments

  • [...] Source Demo [...]

  • Just wanted to say thanks. Created a page template so that this can be applied to various pages . Works like a charm.

  • Hi,

    Looks fantastic, can it be amended so that it references say 2 columns in a sharepoint list and pull back the values? I’ve got 2 lists with 5000 rows, the page search at the moment is really slow and the page hangs (added on the client side)……Appreciate any help.

    Thanks

    • Hi,

      You can change the selector to reference the table cells:

      $("table td").each(function(){
      
  • Hi Lee !

    This is the tutorial what I need. I am looking for the same feature for site based search and also category search .

    I need this for website search , for a category based search etc.

    1) To integrate in site’s default search
    2) To show a particular category

    I know php and do something like that if you can help me

    I am interested to customize it a bit more convenient . There should be a list of categories to be displayed in a list box beside the search box . So a user can select particular category which he want to search and enter the text. So the search results will be displayed from a specific category

    Can you please help me to do this

    • Hi,

      This search is only for text that is already on the page.

  • Thanks for the tip. That worked just fine, however, I want it to fade out so i use .fadeOut(2000); This does the trick, but when I clear the search and enter a new term to filter, the “searching…” message doesn’t come back.

    And my question about showing only resutls is that in my case, I have a users table in a rails app. I want to have a div that is basically just the search box and nothing else until the results are displayed. Does that make sense? Thanks again for your help, very helpful page you have here.

  • Very cool, works great. Two questions, how would you show a message next to the box saying something like “searching…”?

    And second, is there a way to hide the table of comments, or users, or whatever I’m filtering, and only show the results?

    • Hi Ryan – you can place the following line after the keyup event, which will add the text “Searching …”, which will then be replaced by the count once complete:

      $("#filter-count").text("Searching ...");
      

      If your comments are in a HTML list like in the demo then the active results should automatically be filtered

Leave a comment

To add code to your comments wrap the code text in [text][/text] tags