In this post, I will give a quick tutorial on one of my favorite jQuery mods called AutoComplete. I typically use a modded AutoComplete. You find examples of this script on both links, and I highly recommend checking them out for more advanced work, but they both sort of throw a ton of code at you and I wanted to do a quick and painless tutorial on how to use this script.
You will need a total of five different files for this example, which I have bundled here for download. We will really only be looking at two of them.
The first is our index.html page. At the top we have our head, which contains links to js and css files we need to use this.
<link href=”jquery.autocomplete.css” rel=”stylesheet” type=”text/css” />
<script src=”jquery.js” type=”text/javascript”></script>
<script src=”jquery.autocomplete.js” type=”text/javascript”></script>
Make sure to link all three of those files wherever you may put them. The body of this example is incredibly easy.
<body>
<input name=”firstlast” id=”firstlast” type=”text” autocomplete=”off” />
</body>
The relevant parts are the id of the input, in this case ‘firstlast’, and make sure autocomplete is off.
Next we have two JavaScript functions. The first is…
$(document).ready(function() {
$(“#firstlast”).autocomplete(“names.html”, { mustMatch:1, onItemSelect: select_item, matchContains:1 });
});
This function is called when the document finishes loading. We’ll get to the arguments later on, but right now you need to know two things. The (“#firstlast”).autocomplete means that we are setting up a unique handler for the input with an id of ‘firstlast’. This autocomplete function will use the ‘names.html’ file to get it’s results.
Now names.html looks something like this…
Vasiliy Tyler|17|male
Javaid Wotan|34|male
Rae Aikaterine|23|female
Alica India|43|female
Berach Paavali|61|male
It lists a name, an age, and a gender. Only the first item in the list will ever be displayed to the user. You can specify the cell and line separator on your own (| and \n in this case), but we won’t get into that here.
Let’s see how that field is used and do a quick search. Doing a search for ‘lu’ has given us two autocomplete results, each containing the character set of ‘lu’.
How that search was handled depended on the variables we included with the autocomplete function.
{ mustMatch:1, onItemSelect: select_item, matchContains:1 }
Here is a quick explanation of each. (The full list of arguments can be found here).
mustMatch:1
When set to 0, a user can enter in any value he wants into the box. A 0 wouldn’t restrict them to values from your file / database. When set to 1, only choices from the file / db are allowed.onItemSelect:select_item
The name of the JavaScript function to call if an item is selected. In this case, our function is called select_item, but set this to whatever YOUR function is called.matchContains:1
If set to 0, then the only way to find Vasiliy Tyler would be to use the first name, ‘v’, ‘va’, ‘vas’, etc, but in this example, I wanted to find an element by last name too so I set it to 1. This searches any part of the word so even ‘ili’ would come up with Vasiliy Tyler.
Next, we’ll look at the function we set up for onItemSelect.
function select_item(li) {
if ((li.extra != null) && (li.extra != “”)) {
alert(“You choose ” + li.selectValue + “, a ” + li.extra[1] + ” that is ” + + li.extra[0] +” years old.”);
}
}
The first thing this does is verify an item was selected. Since I set mustMatch to true, searches that don’t yield any results will pass a blank value of li, and we don’t want to handle those. Other than that, we simply output the information to an alert box. This is where the “Archimedes Fechin|20|male” is relevant. The first item that is displayed in the autocomplete box is the li.selectValue. Each additional value after that is contained in the extra[] array. So the age is in li.extra[0] and gender is in li.extra[1]. The result for choosing Archimedes is…
And that is all it takes to create your own autocomplete.
Just a quick warning, I noticed a couple of discrepancies in this example than usual. I typically get my results from a database, so it may be due to the use of the simple html page. Entering in a single character should not give all options as it does here. Likewise, previous searches I’ve done do not search mid text unless it is preceded by a space. So a search of ‘bo’ would search every word in an item, but not the middle of the item. I’m not 100% cause of those are in this case, but if any one has any insight, please let me know.
Good luck!
