A Brief Introduction

Anything that makes our sites and/or applications easier for our visitors to use is a good thing. In fact, making things like text boxes more accessible is just plain good practice. Auto complete is a functionality that quite a few applications use nowadays to do just that. A perfect example is Facebook. When you search for one of your friends in the “search for people” text box, you’ll see an auto completed list based on the first few characters that you type. Normally, the information is stored in a database, and every keystroke you type sends a request to the database for a new list based on the characters entered into the text box. Today, we’ll see how to implement an auto complete field using jQuery, which will give you an excellent jump start in making your text boxes more accessible and user-friendly. Let’s go!

Step 1: The HTML

We’ll need just a few HTML elements to start our project off the right way. Obviously, we’ll need a label for our text field, as well as the text field itself. More importantly, we’ll need to link our JavaScript files to the <head> section of our page so that we can begin writing some code. Here’s what the initial HTML should look like:

We’ll be writing our code in the main.js file. Let’s jump into that file and start writing some JavaScript!

Step 2: The JavaScript

We’ll, of course, be using jQuery as our JavaScript library of choice, and if you’ve been through any of the previous jQuery tutorials or you happen to know a bit already, you should be aware of the $(document).ready() function. If not, here’s what you absoutely must have inside of the main.js file to get started:

All, I repeat, all jQuery code must be written within this function for it to work. This will be the start of all of your jQuery code.

Our auto complete control will need a list of data to refer to. As mentioned previously, a lot of the times this is done via some sort of database. To keep things simple, we’ll be creating an array of names that our auto complete control can refer to. To create our array, we’ll use the javascript array literal declaration. This simply means that we’ll declare and add items to our array in the same line of code. We’ll then store our array in a variable called availableNames. Here’s what our array creation looks like:

Great! We now have a fairly extensive list of names to toy around with which, again, will serve as the source for our auto complete control.

The next step is to wire up our text input box to use the auto complete functionality. As with most things, using the jQuery library makes this trivially simple. All we’ll need to do is store the input box in a variable and add theautocomplete() function to it. Once we’ve passed in the function, we simply need to pass in the source: option to tell it where to grab the info. Have a look:

What we’ve done here is stored our input field in a variable called input. The next step was to add the autocomplete() function to our new input variable. This doesn’t actually do anything yet, though. As I mentioned, it was still necessary to pass in the source: option so as to let JQuery know where to look for the data that will populate the auto complete menu.

Open up the page in your browser and type a few letters into the text box. One thing you may notice is that jQuery doesn’t give you results that start with the first letter you type. Rather, what it does is give you all of the results that contain the letter you’ve typed. This can be a good or bad thing depending on your project. I, for one, appreciate the fact that it gives me all of the possible options in case I’m typing a name incorrectly. Others may not see this as a solution to their problem. All in all, though, it’s clear to see the simplicity behind setting up an auto completing field using jQuery.

A Few Last Words

There are literally a million different things you can do with your newly discovered knowledge on jQuery auto complete. You can populate addresses, names, and numbers, anything you can think of. You also don’t have to have an array built locally. JQuery allows you to also pull data via AJAX or a database if you’d prefer. In fact, our next tutorial will discuss JQuery AJAX in greater detail to give you a head start. Hope to see you there!

Download Source Files