For 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
No related posts.
Related posts brought to you by Yet Another Related Posts Plugin.