16
Aug
2012

jQuery Search Box

Posted in: jQuery No Comments

jquery_logo
You may have seen on many websites that search box is pre-filled with some default text like “Search here..” and when you focus mouse on this search box, the pre-filled default text disappears. And if you do not enter any text the pre-defined default text reappears.

Step 1:
Prepare a search box. Please note that search box is using class searchform.

<input class="searchform" type="text" /> <input class="searchbutton" type="button" value="Go" />

Step 2:
Call jQuery Library

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

Step 3:
Now use below jQuery code

<script type="text/javascript">
$(document).ready(function() {
var search_default = "search here..";
$(".searchform").attr('value', search_default);
$(".searchform").focus(function() {
	if ($(this).val() == search_default) {
	$(this).attr('value' , '');
	}
});
$(".searchform").blur(function() {
	if ($(this).val() == '') {
	$(this).attr('value', search_default);
	}
});
});
</script>

Done!!!
Apply some CSS to give cool look to your search form.

You can apply similar method for other form fields like name, email, password etc

About the Author

Name: Ravi Shekhar
I love learning and sharing web stuffs.

Share this post

Twitter Facebook Google Buzz Digg StumbleUpon Delicious Technorati

Leave a Reply