Populated search box - Blog - Philsbury

16 August 2009

A while back I found a script to allow you to have text in your input field that would disappear on focus. It used the value of the particular element. Now I've refined it slightly so that when JavaScript is disabled, nothing will show, the mod has been done to take the text from the label (which I've hidden with jQuery in this instance):

The HTML form:

<form id="aform" method="post">
	<ol class="form">
		<li><label for="s">Search</label><input id="s" name="s" type="text" /></li>		
	</ol>

	<input type="submit" /> 
</form>

The Javascript:

$j.fn.search = function() {
	return this.focus(function() {
	if( this.value == $j(this).siblings('label').html() ) {
		this.value = "";
	}
	}).blur(function() {
		if( !this.value.length ) {
			this.value = $j(this).siblings('label').html();
	}
	});
};

$j("#s").search();

I find it a better method as now if Javascript is disabled, the form won't submit 'Search' into my search box. :)