cssboss



Easy jQuery Effect For Search Fields – Basic Tutorial


Hey everybody, today we’re going to take a look at setting up a search field with a really cool subtle effect that should get your creative juices flowing.

The first thing you see on my screen is my blank html template.

<!DOCTYPE HTML>
<html>
	<head>
		<title>AndrewKaser.com</title>
	</head>
	<body>
		

	</body>
</html>

When learning new things, I always suggest fully isolating the specific feature that you want and learn how to work with it first before trying to put it on a website.

Anyway, we need to create the search field that we are going to be working with. We place this inside of the body tag :

<input type="text" name="search_input" value="Search..." id="search_input" />

To demonstrate the effect, I’ve chosen some very basic design choices but please feel free to get more advanced and share your results with me!! ( I might do a video that’s a little more advanced later)

the CSS for the input field is as follows :

#search_input { text-align: center; font-weight: bold; color: #ff0000; }

Now that that’s all set up, it’s time to install jQuery! Head on over to jQuery.com to grab your copy! I use a CDN hosted version for this tutorial, and place the following code inside of my head tag

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

Now it’s time for the fun stuff. We get to write our own script!

You always want to make sure that your web page is completely loaded before you try running any javascript ( sometimes you might not need this, but it’s still good practice to have this function memorized ), and to do that we place the following just under the jQuery script tags, inside the head tag.

<script type="text/javascript">
	$(document).ready(function() {

	});
</script>

Now that we’re all set up with the basics, time to get our hands dirty! First thing we need to do is define a couple of variables. We need to define the “default CSS styles” and the “active CSS styles” for the 2 different states that the search field can have.

Inside the brackets of the $(document).ready(); function, we’re going to define them like so :

<script type="text/javascript">
	$(document).ready(function() {
		var activeSearchCSS = {
			'text-align' : 'left',
			'font-weight' : 'none',
			'color' : '#000000'
		}

		var defaultSearchCSS = {
			'text-align' : 'center',
			'font-weight' : 'bold',
			'color' : '#ff0000'
		}
	});
</script>

Now that those are set, we can start focusing on the actual behavior of the input field. We’re going to concentrate on the “on click” function / behavior first with jQuery’s .click() function.

Once we know the user has clicked on the #search_input field, the first thing we want to do is make sure that the value is still “Search…” or what ever you may have set it to be. We’ll do that with an if statement, and then we will apply the changes to the CSS, and clear the value of the field.

$('#search_input').click(function(){
	if ( $(this).val() == 'Search...' ) {
		$(this).css(activeSearchCSS);
		$(this).attr('value','');
	}
});

This gives us exactly what we wanted! However, if we leave the field blank and click out of it, it should really go back to looking how it did before we touched it. So let’s make that happen.

We’ll use jQuery’s .blur() function to detect if a user is no longer focused on the #search_input field, and we’ll check to make sure that the field is EMPTY before restoring it’s default look. If the form has any value other than nothing, we’ll leave it alone.

$('#search_input').blur( function(){ 
	if ( $(this).val() == '' ) {
		$(this).css(defaultSearchCSS);
		$(this).attr('value','Search...');
	}
});

Now our search form is looking awesome! This is a very subtle effect, and does not change how your website works. It’s simply a way to give life to a very boring element on most websites.

I hope you learned something or had fun while watching the tutorial! Thank you for taking the time to watch it!

Have a great day
-Kaser