Simple example on how to search a list with jQuery

How to create a simple List Search with basic jQuery Functions.

First we need to create a simple unordered list for this example:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>Insert title here</title>
	<style type="text/css">
		body{margin:0;padding:0}
		ul.search-list{list-style:none;margin:0;padding:0}
	</style>
</head>
<body>
	<label for="search">Search</label>
	<input type="text" id="search" name="searchword" value="" />
	<ul class="search-list">
		<li>eins</li>
		<li>zwei</li>
		<li>drei</li>
		<li>vier</li>
		<li>f&uuml;nf</li>
		<li>sechs</li>
	</ul>
</body>
</html>

Add the current jQuery Library into the header part. I use Googles jQuery API in most of my projects to keep the transfer off my servers. I suggest the same for you if you are looking for performance.

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

To catch all changes from the search field with id “search” I am going to bind the the change keyup event to the id.

$('#search').bind("change keyup", function() {
});

Going on I check how many letters the user inserted, this value I set to 2. Play with this as you like.

searchWord = $(this).val();
if (searchWord.length > 2) {
}

So, I start search the list as soon as the user inserted at least 3 letters.

To finally search the list I loop thru the list with jQuery’s each function and use their match function on each list item text.

$('ul.search-list li').each(function() {
	text = $(this).text();
	if (text.match(searchWord)) {
		// Jipieh found one match, now do something with the current list item.
		// In my case I mark the background of the list item yellow.
		$(this).css('background-color', 'yellow');
	}
});

Just using match with the search string will not find case insensitive matches. Simply prepare the statement with RegExp as follows.

// 'i' stands for case insensitive
if (text.match(RegExp(searchWord, 'i'))) {

Now finally the whole example at once

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>Insert title here</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<style type="text/css">
		body{margin:0;padding:0}
		ul.search-list{list-style:none;margin:0;padding:0}
	</style>
	<script type="text/javascript">
	$(document).ready(function(){
		//$('.search-list')
		$('#search').bind("change keyup", function() {
			searchWord = $(this).val();
			if (searchWord.length >= 3) {
				$('ul.search-list li').each(function() {
					text = $(this).text();
					if (text.match(RegExp(searchWord, 'i'))) {
						$(this).css('background-color', 'yellow');
					}
				});
			}
		});
	});
	</script>
</head>
<body>
	<label for="search">Search</label>
	<input type="text" id="search" name="searchword" value="" />
	<ul class="search-list">
		<li>eins</li>
		<li>zwei</li>
		<li>drei</li>
		<li>vier</li>
		<li>f&uuml;nf</li>
		<li>sechs</li>
	</ul>
</body>
</html>

If this is not enough you also could just wrap the matched subtext with a background, simply change your js:

if (searchWord.length >= 1) {
	$('ul.search-list li').each(function(i, data) {
		text = $(this).text();
		if (text.match(RegExp(searchWord, 'i'))) {
			newHTML = text.replace(RegExp(searchWord), '<span style="background:yellow">'+searchWord+'</span>');
			$('ul.search-list li:eq('+i+')').html(newHTML);
		}
	});
}

I suggest that in both cases you are also not searching just once, so you have to reset the last search results.
With the first whole list item background example simply add one line:

$('#search').bind("change keyup", function() {
	searchWord = $(this).val();
	if (searchWord.length >= 1) {
		// this is new   ... reset background
		$('ul.search-list li').css('background-color', 'white');
			$('ul.search-list li').each(function(i, data) {
			text = $(this).text();
			if (text.match(RegExp(searchWord, 'i'))) {
				$(this).css('background-color', 'yellow');
			}
		});
	}
});

With the snippet that just marks the specified search substring do this:

$('#search').bind("change keyup", function() {
	searchWord = $(this).val();
	if (searchWord.length >= 1) {
		// did it quick and dirty with class
		$('ul.search-list li span.mark-search-result').attr('background-color', 'white');

		$('ul.search-list li').each(function(i, data) {
			text = $(this).text();
			if (text.match(RegExp(searchWord, 'i'))) {
				newHTML = text.replace(RegExp(searchWord), '<span style="background:yellow" class="mark-search-result">'+searchWord+'</span>');
				$('ul.search-list li:eq('+i+')').html(newHTML);
			}
		});
	}
});

So that’s it, you could ofc ourse hide elemnts that don’t match and show them again or make whatever you like

Ashish // 3rd February, 2012 at 11:04 AM
Very simple and easy to understand, thanks for this nice post

Reply