Yahoo! Developer Network - Flash Developer Center - ASTRA Flash Components - AutoComplete

ASTRA AutoComplete

AutoComplete is a specialized text entry field that provides a list of suggestions from a supplied data set based on the characters entered by the user.

Using AutoComplete in Flash CS3

In Getting Started, we created a simple AutoComplete example. Let's go beyond that by creating a real-world example using AutoComplete to help the user select an airport by airport code or city.

Please be sure that the AutoComplete component appears in your library, or your project will not run correctly. First let's import the stuff we'll need.

Next, let's set up some data. Here we'll use an XML list of the top 30 airports around the world. Instead of a simple array, we'll use XML to allow for codes as well as cities and other info.

//Create a list of the 30 top airports
	var airports:XML = 
	<list>
	  <a>
	    <city>Atlanta</city>
	    <name>Hartsfield-Jackson Atlanta Int?l</name>
	    <code>ATL</code>
	    <country>USA</country>
	  </a>
	  <a>
	    <city>Chicago</city>
	    <name>Chicago O?Hare International</name>
	    <code>ORD</code>
	    <country>USA</country>
	  </a>
	  <a>
	    <city>London</city>
	    <name>London Heathrow</name>
	    <code>LHR</code>
	    <country>UK</country>
	  </a>
	  <a>
	    <city>Tokyo</city>
	    <name>Haneda</name>
	    <code>HND</code>
	    <country>Japan</country>
	  </a>
	  <a>
	    <city>Los Angeles</city>
	    <name>Los Angeles Int?l</name>
	    <code>LAX</code>
	    <country>USA</country>
	  </a>
	  <a>
	    <city>Dallas/Fort Worth</city>
	    <name>Dallas/Ft. Worth Int?l</name>
	    <code>DFW</code>
	    <country>USA</country>
	  </a>
	  <a>
	    <city>Paris</city>
	    <name>Charles de Gaulle</name>
	    <code>CDG</code>
	    <country>France</country>
	  </a>
	  <a>
	    <city>Frankfurt/Main</city>
	    <name>Frankfurt International</name>
	    <code>FRA</code>
	    <country>Germany</country>
	  </a>
	  <a>
	    <city>Amsterdam</city>
	    <name>Amsterdam-Schiphol</name>
	    <code>AMS</code>
	    <country>Netherlands</country>
	  </a>
	  <a>
	    <city>Denver</city>
	    <name>Denver International</name>
	    <code>DEN</code>
	    <country>USA</country>
	  </a>
	  <a>
	    <city>Las Vegas</city>
	    <name>McCarran International</name>
	    <code>LAS</code>
	    <country>USA</country>
	  </a>
	  <a>
	    <city>Phoenix</city>
	    <name>Sky Harbor Int?l</name>
	    <code>PHX</code>
	    <country>USA</country>
	  </a>
	  <a>
	    <city>Madrid</city>
	    <name>Madrid-Barajas (AENA)</name>
	    <code>MAD</code>
	    <country>Spain</country>
	  </a>
	  <a>
	    <city>Bangkok</city>

<name>Bangkok International</name>

<country>Thailand</country>

</a>

<a>

<name>John F. Kennedy Int?l</name>

</a>

<a>

<city>Minneapolis/St Paul</city>

<name>Minneapolis/St. Paul International</name>

</a>

<a>

<name>Hong Kong International Airport</name>

<country>Hong Kong PR China</country>

</a>

<a>

<city>Houston</city>

<name>George Bush Intercontinental</name>

</a>

<a>

<city>Detroit</city>

<name>Detroit Metropolitan Wayne County</name>

</a>

<a>

<city>Beijing</city>

<name>Beijing Capital Int?l</name>

<country>PR China</country>

</a>

<a>

<city>San Francisco</city>

<name>San Francisco International</name>

</a>

<a>

<city>Newark</city>

<name>Newark Liberty Int?l</name>

</a>

<a>

<city>London</city>

<name>Gatwick Airport</name>

</a>

<a>

<city>Orlando</city>

<name>Orlando International</name>

</a>

<a>

<city>Tokyo</city>

<name>Narita Int?l Airport</name>

<country>Japan</country>

</a>

<a>

<city>Singapore</city>

<name>Changi Airport</name>

<country>Singapore</country>

</a>

<a>

<city>Miami</city>

<name>Miami International Airport</name>

</a>

<a>

<city>Seattle</city>

<name>Seattle-Tacoma Int?l</name>

</a>

<a>

<city>Toronto</city>

<name>Pearson International</name>

<country>Canada</country>

</a>

<a>

<city>Philadelphia</city>

<name>Philadelphia Int?l</name>

</a>

</list>;

The following code will instantiate the AutoComplete instance, place it on the stage, and modify a few properties.

In this case we've set the labelField to "name" to display that field in the list that will pop up (and when an item is selected, it will show that field as text in the text field). If you'd prefer to show, for instance, the airport codes, choose "code" as the labelField. Here we've also set the autoFillEnabled property to true. This will cause the text field to automatically complete with the most obvious entry (and the user can hit backspace to ignore it).

Next we'll create our own filter function. The default filter function searches for matches based on the labelField, so that would only show the "San Francisco Int'l Airport" if "San Fr.." was typed in. If a savvy user who's memorized all the airport codes tried to enter "SFO" it wouldn't match. That's no fun, so we'll fix that by setting a custom filter function, which will display matches for airport codes, cities, or the names of airports (think "New York City" and "John F. Kennedy Airport").

Now it should work as expected, and turn out to be a pretty useful component. Here's the full example you can copy and paste. We love to make components for travel applications, and it shows.

//get the required classes
	import com.yahoo.astra.fl.controls.AutoComplete;
	import fl.data.DataProvider;

//Create a list of the 30 top airports

var airports:XML =

<list>

<a>

<city>Atlanta</city>

<name>Hartsfield-Jackson Atlanta Int�l</name>

</a>

<a>

<city>Chicago</city>

<name>Chicago O�Hare International</name>

</a>

<a>

<city>London</city>

<name>London Heathrow</name>

</a>

<a>

<city>Tokyo</city>

<name>Haneda</name>

<country>Japan</country>

</a>

<a>

<city>Los Angeles</city>

<name>Los Angeles Int�l</name>

</a>

<a>

<city>Dallas/Fort Worth</city>

<name>Dallas/Ft. Worth Int�l</name>

</a>

<a>

<city>Paris</city>

<name>Charles de Gaulle</name>

<country>France</country>

</a>

<a>

<city>Frankfurt/Main</city>

<name>Frankfurt International</name>

<country>Germany</country>

</a>

<a>

<city>Amsterdam</city>

<name>Amsterdam-Schiphol</name>

<country>Netherlands</country>

</a>

<a>

<city>Denver</city>

<name>Denver International</name>

</a>

<a>

<city>Las Vegas</city>

<name>McCarran International</name>

</a>

<a>

<city>Phoenix</city>

<name>Sky Harbor Int�l</name>

</a>

<a>

<city>Madrid</city>

<name>Madrid-Barajas (AENA)</name>

<country>Spain</country>

</a>

<a>

<city>Bangkok</city>

<name>Bangkok International</name>

<country>Thailand</country>

</a>

<a>

<name>John F. Kennedy Int�l</name>

</a>

<a>

<city>Minneapolis/St Paul</city>

<name>Minneapolis/St. Paul International</name>

</a>

<a>

<name>Hong Kong International Airport</name>

<country>Hong Kong PR China</country>

</a>

<a>

<city>Houston</city>

<name>George Bush Intercontinental</name>

</a>

<a>

<city>Detroit</city>

<name>Detroit Metropolitan Wayne County</name>

</a>

<a>

<city>Beijing</city>

<name>Beijing Capital Int�l</name>

<country>PR China</country>

</a>

<a>

<city>San Francisco</city>

<name>San Francisco International</name>

</a>

<a>

<city>Newark</city>

<name>Newark Liberty Int�l</name>

</a>

<a>

<city>London</city>

<name>Gatwick Airport</name>

</a>

<a>

<city>Orlando</city>

<name>Orlando International</name>

</a>

<a>

<city>Tokyo</city>

<name>Narita Int�l Airport</name>

<country>Japan</country>

</a>

<a>

<city>Singapore</city>

<name>Changi Airport</name>

<country>Singapore</country>

</a>

<a>

<city>Miami</city>

<name>Miami International Airport</name>

</a>

<a>

<city>Seattle</city>

<name>Seattle-Tacoma Int�l</name>

</a>

<a>

<city>Toronto</city>

<name>Pearson International</name>

<country>Canada</country>

</a>

<a>

<city>Philadelphia</city>

<name>Philadelphia Int�l</name>

</a>

</list>;

//create a label
var textField:TextField = new TextField();
textField.text = "Try your favorite airport, such as SFO";
textField.y = 5;
textField.x = 10;
textField.width = 200;
addChild(textField);

//Create an AutoComplete instance
var autoComplete:AutoComplete = new AutoComplete();

//give it the airports
autoComplete.dataProvider = new DataProvider(airports);

//Set the field to display in the popup list; 
//for this example, "code", "city", or "country" would also work
autoComplete.labelField = "name";
autoComplete.x = 10;
autoComplete.y = 20;
autoComplete.width = 200;

//Have it fill in the text field with the most likely entry
autoComplete.autoFillEnabled = true;

//Replace the default filter so it returns airport code or city matches as well
autoComplete.filterFunction = airportFilterFunction;

//add it to the stage
addChild(autoComplete);

//forego the default filter function to return items that match cities, airport codes, or airport names
function airportFilterFunction(element:*, index:int = 0, arr:Array = null):Boolean 
{
	var txt:String = autoComplete.text.toLowerCase();

var willWork:Boolean =  (element.city.toLowerCase().substring(0,txt.length) == txt) ||
							(element.name.toLowerCase().substring(0,txt.length) == txt) ||
							(element.code.toLowerCase().substring(0,txt.length) == txt);

return willWork;
}

Screen capture of AutoComplete

To see a live example, please install Adobe Flash Player version 9 or higher.

Download the FLA file.

For additional information, please take a look at the Examples section for functional demonstrations and the ActionScript 3.0 Class Reference for full details on every property, method, and style available to the AutoComplete component.