JQuery – Basic AutoComplete Example with Code

I am taking a look into the JQuery AutoComplete widget and wanted to create an example with the most simple and scaled down functionality possible. In the image to the left is an example of what this looks like in action. It is basically an HTML text area that is hooked up to a static array of options.

What is an AutoComplete Widget?

An AutoComplete widget basically does what it sounds like. It can be added to an HTML control such as a text input area so that once a user starts typing in the area a narrowing list of options appears. The simplest way to populate these options is using a hard-coded array (as I will illustrate in this example), but naturally such hard-coding is also the least flexible and maintainable.

Two other options for populating the AutoComplete widget are Ajax calls or a Callback. These two options are great since the data can dynamically be retrieved from a database or similar data source, and they also scale very well once your options arrays reach several hundred options in size.

Here is the code:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script>
<script>
$(function() {
var itemList = [
"Alfa","Alpha","Bravo","Charlie","Delta","Echo","Foxtrot","Golf","Hotel",
"India","Juliett","Juliet","Kilo","Lima","Mike","November","Oscar","Papa"
];
$("#form1 input#autoCompleteTest").autocomplete({
source: itemList
});
});
</script>
</head>
<body>
<form id="form1" name="form1">
Autocomplete test area <input type="text" id="autoCompleteTest" class="ui">
</form></body>
</html>

Resources:

Justin Cooney

2012-01-28

AutoComplete, JQuery, Programming

6 responses to “JQuery – Basic AutoComplete Example with Code”

Coder

January 30, 2012 at 2:39 am

Great work sir!!! jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. It was released in January 2006 at BarCamp NYC by John Resig. Used by over 49% of the 10,000 most visited websites, jQuery is the most popular JavaScript library in use today. you can refer here to know more about Jquery

Reply
George Birbilis

February 1, 2012 at 10:01 am

would be extra nice if you would autocomplete when user clicks on the control 1st time and then drop the list programmatically

that way you don’t spend time for lists that might not be dropped at all by the user

Reply
1. Justin Cooney
  
  February 1, 2012 at 6:39 pm
  
  Thanks for your comment! I agree, that would definitely be optimal; especially with larger sets of options.
  
  Reply
markp3rry

February 1, 2012 at 6:04 pm

I would suggest taking a look at Drew Wilson’s AutoSuggest plugin (http://code.drewwilson.com/entry/autosuggest-jquery-plugin). It’s really easy to use and works with data in json format via an AJAX call. I use it on a couple of sites I maintain and the style sheet that comes bundled means you can style the suggestions to suit your site.

Reply
1. Justin Cooney
  
  February 1, 2012 at 6:30 pm
  
  Thanks for the suggestion, Drew Wilson’s AutoSuggest plugin looks quite useful! I will give it a shot with a new page I’m working on.
  
  Reply
Simple autocomplete in jQuery UI « Sharepoint…

February 5, 2012 at 4:40 pm

[…] to Justin Cooney and jsfiddle. Here is a simple autocomplete example: Like this:LikeBe the first to like this post. […]

Reply