Making a Dynamic jQuery Search Box

dynamic_search

I noticed a lot of people are searching my site for this and use dynoBox, but for basic functionality to simply delete the default text in the search box on when a user clicks on it is actually very easy. Here is the example functionality.

First is your simple input HTML (make sure to close your tag for XHTML!):

<input id="search" type="text" name="search" value="Search">

And here is the jQuery code:

$(function(){ //Document ready shorthand
	var $search = $('#search');//Cache the element for faster DOM searching since we are using it more than once
	original_val = $search.val(); //Get the original value to test against. We use .val() to grab value="Search"
	$search.focus(function(){ //When the user tabs/clicks the search box.
		if($(this).val()===original_val){ //If the value is still the default, in this case, "Search"
			$(this).val('');//If it is, set it to blank
		}
	})
	.blur(function(){//When the user tabs/clicks out of the input
		if($(this).val()===''){//If the value is blank (such as the user clicking in it and clicking out)...
			$(this).val(original_val); //... set back to the original value
		}
	});
});

Thats all. Not much to it is there?

[Post to Twitter]   [Post to Delicious]   [Post to Digg]   [Post to Reddit]   [Post to StumbleUpon]  

Posted in (X)HTML, Programming, jQuery