jQuery Dropdown Suggestions

jquery dropdown suggestionsFor this tutorial we are going to create a drop down box similar to the one on the Google homepage when you start typing.

The Markup

The first thing that we must do is create the markup HTML. We are also going to include a stylesheet called style.css, we will create the CSS further down the tutorial.

We need to create an input field and a DIV element, the DIV element is where the suggestions will be displayed.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>TheTutorialBlog.com - jQuery Dropdown Suggestions</title>
	<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
	<input type="text" name="suggestions" class="suggestionsinput" value="Search" />
	<div id="suggestions">
		Suggestions for <span class="searchterm"></span>...
	</div><!--suggestions-->
</body>
</html>

The CSS

Create a file called style.css in the same folder.

We are going to give the input field and suggestions DIV rounded corners of 5 pixels. We will also hide the suggestions DIV because it should only be visible when a user starts to type.

	body {
		background-color: #ccc;
	}
 
	.suggestionsinput {
		font-size: 36px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border: 1px solid #999;
		color: #999;
	}
 
	#suggestions {
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		width: 460px;
		background-color: #999;
		position: fixed;
		padding: 5px;
		visibility: hidden;
	}

The jQuery

Load the jQuery library from Google. Place this code below the include of the CSS file in your HTML file.

	<script src="http://www.google.com/jsapi"></script>
	<script type="text/javascript">
	google.load("jquery", "1.3.2");
	</script>

Below this code we will write our jQuery.

Check that the document is loaded.

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

When the page is loaded the input field will display "Search", when the user clicks on the input field we want it to be blank so that they can start searching without having to delete the word.

	// clear text from input
	$(".suggestionsinput").click(function(){
		if($(".suggestionsinput").val() == "Search")
		{
			$(".suggestionsinput").val("");
		}
	})

When the input field has been cleared the user will begin typing, we need to check to see if the user has started typing and if they have then we need to display the suggestions box.

	// check if key has been pressed
	$(".suggestionsinput").keyup(function(event){
		if($(".suggestionsinput").val() != "")
		{
			// make suggestions visible
			$("#suggestions").css('visibility', 'visible');
			$("#suggestions").hide();
			$("#suggestions").fadeIn('slow');
			$(".searchterm").text($(".suggestionsinput").val());
			// $("#suggestions").load('http://URL.to.load');
 
		} else {
			// hide suggestions
			$("#suggestions").fadeOut('slow', function(){
				$("#suggestions").css('visibility', 'hidden');
			});
 
		}
	})

In this tutorial we are only making the drop down box visible, to load an actual list of suggestions uncomment $("#suggestions").load('http://URL.to.load'); then specify a URL where your script is that will load your suggestions and return it to the user.

The HTML File

	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>TheTutorialBlog.com - jQuery Dropdown Suggestions</title>
		<link rel="stylesheet" href="style.css" type="text/css" />
		<script src="http://www.google.com/jsapi"></script>
		<script type="text/javascript">
		google.load("jquery", "1.3.2");
		</script>
 
		<script type="text/javascript">
		$(document).ready(function(){
 
			// clear text from input
			$(".suggestionsinput").click(function(){
				if($(".suggestionsinput").val() == "Search")
				{
					$(".suggestionsinput").val("");
				}
			})
 
			// check if key has been pressed
			$(".suggestionsinput").keyup(function(event){
				if($(".suggestionsinput").val() != "")
				{
					// make suggestions visible
					$("#suggestions").css('visibility', 'visible');
					$("#suggestions").hide();
					$("#suggestions").fadeIn('slow');
					$(".searchterm").text($(".suggestionsinput").val());
					// $("#suggestions").load('http://URL.to.load');
 
				} else {
					// hide suggestions
					$("#suggestions").fadeOut('slow', function(){
						$("#suggestions").css('visibility', 'hidden');
					});
 
				}
			})
 
 
 
 
		})
		</script>
	</head>
	<body>
		<input type="text" name="suggestions" class="suggestionsinput" value="Search" />
		<div id="suggestions">
			Suggestions for <span class="searchterm"></span>...
		</div><!--suggestions-->
	</body>
	</html>

The CSS File: style.css

body {
background-color: #ccc;
}

.suggestionsinput {
font-size: 36px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #999;
color: #999;
}

#suggestions {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
width: 460px;
background-color: #999;
position: fixed;
padding: 5px;
visibility: hidden;
}

Download/Demo

Download
Demo

Bookmark and Share
Share and Enjoy:
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • email
  • FriendFeed
  • LinkedIn
  • Ping.fm
  • Tumblr
  • Twitter

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

, , , , ,

4 Responses to jQuery Dropdown Suggestions

  1. besucher80 June 16, 2010 at 10:40 am #

    Hi, great code .. i love it …

    but is there a way to disable and enable the suggest?

    With a link or a checkbox?

    Thanks

  2. Wez Pyke June 16, 2010 at 4:17 pm #

    Yeah, you could create a variable and then change the value when a checkbox is checked or unchecked. Then use an IF statement to see whether it is enabled or not.

  3. besucher80 June 18, 2010 at 4:50 am #

    Hi, my javascript is not so good ... but your code is very good ... can you give me some demo or example? Thank you very much ...

  4. Shawn Bohinc June 20, 2010 at 5:43 am #

    I truly appreciate this post. Really Great.

Leave a Reply