Populated search box

UPDATE: This is pretty much obsolete now with 'placeholder' in the HTML5 spec

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. 🙂