Flexible AutoComplete (Suggested Words) Code for Text Input Fields using JavaScript

This post was written a long time ago, and since then many other great solutions have come out to accomplish this task. I have kept my post for historical reasons, but the files are no longer available and the code on the page is no longer functional.

As I’m sure you’ve seen on many websites, displaying suggestions while a user types text into a text field has become quite popular. However, I was rather disappointed with the solutions I’ve found out there. The solutions I’ve found had any combination of the following problems:

No cross-browser support: Obviously, any acceptable solution needs to work across the major browsers.
Limited to a single text field per page: The solution needs to be flexible enough to allow multiple text fields on a page to either display the same suggestions, or display a completely different set of suggestions.
Ease of use: The solution needs to be simple to use, yet powerful enough to allow the designer to fairly easily modify the way the code works and change the look of the suggestions.

With that in mind, I attempted to improve on an existing library. I started working with this one, but pretty soon I realized that I would need to rewrite basically all the code. Below is a description of the code. In order to make this work, you will need to add the following to the <head> of your HTML page:

<script language="javascript" type="text/javascript" src="autocomplete.js"></script>

The file referenced above can be downloaded here.

It’s probably best to see what we’re doing, so below is an example of a text field that uses the autocomplete code. It only auto-completes some text that starts with the letter t, so make sure you type that as the first letter.

Suggests words after the user types in a T (ex: two, three )

Assuming you have the autocomple.js file correctly included in the page, the way to populate the autocomple drop down is with the collowing code:

<input type="text" size="40" autoComplete="mygroup1" /> 
<script language="javascript" type="text/javascript"> 
    autoComplete.Set("mygroup1", new Array("two", "three", "twenty", "tweak", "tool", 
    "two hundred", "testing", "two-thirds", "terran", "tomato", "tower", "twin", "task", 
    "toolbar", "test")); 
</script>

In order to demonstrate that this is flexible enough to support multiple text fields on the same page, here is another example of a text field, along with the code necessary to display it. Also, notice that I’m creating a new “group”, which allows me to display different suggestions in the text field. If I wanted to, I could simply assign the same “group”, and this second text field would have identical suggestions to the one above.

Suggests words after the user types in a F (ex: four, five )

<input type="text" size="30" autoComplete="mygroup2" /> 
<script language="javascript" type="text/javascript"> 
    autoComplete.Set("mygroup2", new Array("four", "five", "fifty", "fast", "filip", "fun", 
    "feast", "farse", "football", "fantasy", "fork", "fanta", "festival", "fall", "foo")); 
</script>

Obviously, people will want to style the drop downs differently. The autocomplete.js file contains script which registers a default style, but it also allows you to pass in a style using the autoComplete.Set() method. In the example below, I’ve created a new style, and assigned it by passing the class name of the style as the third parameter into the Set() method.

Suggests words after the user types in a A (ex: apple, art )

<style type="text/css"> 
.newPopupStyle { font-family:Verdana; font-size: 9pt; color:aqua; width: 150px; margin: 3px; 
    background-color: Red; font-weight: bold; } 
.newPopupStyle div { top: -3px; left: -3px; background: brown; border: solid 1px blue; 
    position: relative; overflow: auto; max-height: 100px; } 
.newPopupStyle span { cursor: default; margin: 2px; display: block; } 
.newPopupStyle span.wordSelected { background: yellow; color: Fuchsia; } 
</style> 

<input type="text" size="30" autoComplete="mygroup3" /> 
<script language="javascript" type="text/javascript"> 
    autoComplete.Set("mygroup3", new Array("apple", "aspen", "art", "artistic", 
    "abracadabra"), "newPopupStyle"); 
</script>

There is more you can do with the code. The javascript file is farily well documented, so hopefully if you need to change anything, it will be pretty straightforward. You can actually greatly reduce the size of the file if you remove the comments.

KNOWN ISSUES:

If the margin of the body tag is not 0, the drop down will not render in the appropriate spot in IE. Apply a margin (ex: <body style=”margin: 0;”> ) to fix the problem.

UPDATES:

Feb. 25, 2009 – Fixed a problem in autocomplete.js. It should now also work on Safari 4.0 beta.

LICENSE:

I have received a few questions about the license for this code. You can use this code for any purpose, including commercial. If you do find issues or bugs with the code, I do ask that you let me know so that I can put in a fix.

Bloodforge Blog

Flexible AutoComplete (Suggested Words) Code for Text Input Fields using JavaScript

Leave a Comment Cancel reply