Type and spot using jQuery’s :contains()

Today I’m going to share a tutorial on how to create a simple content spotter using one of jQuery’s selector, :contains(). This selector, as in jQuery’s description, will select all elements that contain the specified text. Using that ability we can find any element that contains the text we specify and modify the selected element, for example, we have a numerous unordered list item on our webpage yet hard to find the one we need, we can use :contains() to select and spot the matched element with the text we specify.

HTML & CSS

The first step is to create a page with numerous unordered list item and input text as an input to specify a text to find on an element. I’m using Webstuffshare’s tags collection as a list items. The #searchbox will catch a text change when the user type something.

WordPress
CSS
jQuery
HTML5
Charts
Framework
Code Snippet
Free Stuff
CMS
JavaScript
Buttons
Cart
jQuery UI
Mootools
MySQL
PSD
Themes
Pattern
WYSIWYG
Forms
iPhone
Icons
Design
Flash
jGrowl

Each list item will be displayed as a horizontal block with transparent background, when the block being spotted or hovered the transparent background will be decreased. The transition will use css transition so it will be animated, like fade in effect. The spotted list item will have class name “spot”.

#searchbox {
	display: block;
	margin-bottom: 1em;
	width: 727px;
	padding: 10px;
	margin-left: 2em;
	border: 0;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	-webkit-transition: .3s ease-in-out;
  	-moz-transition: .3s ease-in-out;
  	-o-transition: .3s ease-in-out;
  	transition: .3s ease-in-out;
}

	#searchbox:focus {
		-webkit-box-shadow: 0px 0px 10px #fff;
		-moz-box-shadow: 0px 0px 10px #fff;
		-o-box-shadow: 0px 0px 10px #fff;
		box-shadow: 0px 0px 10px #fff;
		outline: none;
	}

.list {
	list-style-type: none;
	margin: 0;
}

	.list li {
		display: inline-block;
		overflow: hidden;
		width: 120px;
		vertical-align: top;
		font-size: 17px;
		background: rgba(255,255,255,.2);
		text-shadow: 1px 1px 0px rgba(0,0,0,.5);
		border-radius: 3px;
		padding: 10px;
		margin: .5em .5em .5em 0;
		cursor: pointer;
		-webkit-transition: .5s ease-in-out;
  		-moz-transition: .5s ease-in-out;
  		-o-transition: .5s ease-in-out;
  		transition: .5s ease-in-out;
	}

		.list li:hover, .list li.spot {
			color: #1e2b39;
			text-shadow: 1px 1px 0px #fff;
			background: rgba(255,255,255,.9);
		}

JavaScript

To catch text change on #searchbox we can use keyboard events, .keyup(). Any changes on #searchbox will search every list item that contains its value, then add class “spot” on them. Since every list item probably have been added class “spot” when user typing, we must remove that class to revert their styling.

$('#searchbox').keyup(function() {
	keyword = $(this).val();
	$('.list li').removeClass('spot');
	$('.list li:contains('+keyword+')').addClass('spot');
})

I also add .focus() and .blur() event on #searchbox so when user to check wether the user have typing something or not.

$('#searchbox').keyup(function() {

	keyword = $(this).val();
	$('.list li').removeClass('spot');
	$('.list li:contains('+keyword+')').addClass('spot');

}).focus(function() {

	if($(this).val() == 'Type to spot... (case sensitive)')
		$(this).val('');

}).blur(function() {

	if($(this).val() == '')
		$(this).val('Type to spot... (case sensitive)');
});

We are done

This implementation only show small amount of list item but you can add unlimited item on it. Spotting element also can be implemented in various way by modify the style.