The Autocomplete widgets provides suggestions while you type into the field. It's a great way to create search, tags or category form on your niche blog. You can also create some cool forms with this UI. In this tutorial, I'll show how to easily use this autocomplete widget.
1. Create A New Document:
It's a beginner's tutorial so, I'll explain in some very easy language, not going to use all those crappy words. Create a new HTML document, below is basic page structure:
<html>
<head>
</head>
<body>
</body>
</html>
2. Adding jQuery Script And CSS:
Now we'll add magical jQuery script and jQuery UI's stylesheet. Just add following code between your <head> ... </head> in your document:
<link rel=stylesheet href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"></link>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
Save your template. Let's move to our third step where we're going to add our input form:
3. Adding Our Input Form:
It's time to add our input form in your document. Our input form is surrounded by <div> </div> tag to style our form. Just add following mark-up between our document's <body> ... </body> tag:
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>
Remember, our input element's id is tags. We're pretty much done right here. Now, it's time to add our autocomplete text values.
4. Adding Autocomplete Values:
Finally, it's time to add our autocomplete values. First add following script above </head>:
<script>
$(function() {
var availableTags = [
AUTO COMPLETE VALUES HERE
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
Now, let's replace red text in above document with some available autocomplete values. We're going to add some values like this:
"Basket Ball",
"Baseball",
"Cricket"
Don't add "comma" in last value. Here is full mark-up of this autocomplete jQuery code:
<script>
$(function() {
var availableTags = [
"Basket Ball",
"Baseball",
"Cricket",
"F1",
"Football",
"Hockey",
"Ice Hockey",
"MMA",
"Moto GP",
"Nascar",
"Racing",
"Wrestling",
"Pro-Wrestling"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
That's it. You can also add scrollable results by adding following css:
<style>
.ui-autocomplete {
max-height: 100px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
height: 100px;
}
</style>
Full Document Mark-Up:
Below is the full mark-up of our document:
<link rel=stylesheet href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"></link>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
.ui-autocomplete {
max-height: 100px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
height: 100px;
}
</style>
<script>
$(function() {
var availableTags = [
"Basket Ball",
"Baseball",
"Cricket",
"F1",
"Football",
"Hockey",
"Ice Hockey",
"MMA",
"Moto GP",
"Nascar",
"Racing",
"Wrestling",
"Pro-Wrestling"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>
Don't forget to leave a comment!
