AutoComplete, JQuery, Programming

JQuery – Basic AutoComplete Example with Code

JQuery AutoComplete Basic UI
JQuery AutoComplete Basic UI

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:

Advertisements

6 thoughts on “JQuery – Basic AutoComplete Example with Code”

  1. 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

  2. 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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s