AS3 AutoComplete Class (Updated)

So I recently needed AutoComplete functionality for a project at work. After some search I didn’t really find anything that fit the bill, so I went ahead and made an AutoComplete class. It’s fairly straightforward in it’s usage and works perfectly for what I needed. All you do is pass it an input textfield and a vector array of strings consisting of words or phrases that will be parsed for completions. Listen for the change event and get the updated vector of completions from the class and do whatever you want with them.

It also allows for more advanced options, like setting the number of characters that must be present before the parsing starts and the delay from the users keystroke to when the parsing starts.

I initially wanted to dynamically draw a dropdown list to display the list of possible completions, but I decided that I wanted the flexibility to display the completions in any manner I wanted, hence the reason for only being able to get the vector array of completions. It turned out pretty well, but I think it could be optimized a bit more.

Here’s an example usage, you’ll find a download link at the end of the post:

var dictionary:Vector.<String> = new Vector.<String>();
dictionary.push("This is the first test");
dictionary.push("Hello!");
dictionary.push("Here we have another test");
dictionary.push("This is a test test test");

// instantiate class, passing it the input textfield that should be used to check for completions,
// as well as the list of words or phrases to check against.
var ac:AutoComplete = new AutoComplete(input_txt, dictionary);

// add the event listener to capture the completions.
ac.addEventListener(Event.CHANGE, onCompletions);

// if you want, you can specify the length of the pause (in milliseconds) from the users keystroke to when the parsing starts
ac.parseDelay = 250;

// you can also specify the number of characters that must be typed before the parsing starts
ac.charBuffer = 5;

function onCompletions(event:Event):void
{
trace("Completions for: " + input_txt.text);
for(var i:int = 0; i < ac.completions.length; ++i)
{
trace(ac.completions[i]);
}
trace("-------------------------");
}

// if you want to force a parse, you can do so by calling the parseInput() method, which will in turn dispatch the CHANGE event
// with relevant completions of the current text, as long as the charBuffer has been met.
ac.parseInput();

If anyone can make any improvements or uses this in their code, let me know in the comments!

* Updated 7/5/2011: There were a few lingering bugs that I came across while testing and implementing this class that is now fixed, but no methods or code changes should be required by anyone using this class.

*Update 12/13/2012:  I’ve uploaded a zip file that contains the class file, as well as a basic working example of how you can use the class.

As3 AutoComplete Examples 22.79 KB

AutocompleteExamples.zip

If you only need the class file, you can grab it here:

AS3 AutoComplete Class 10.39 KB

autocomplete.as