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

ASTRA AutoCompleteManager

AutoCompleteManager manages a set of input controls, popping up suggestions when a user types into one of the fields. Instead of replacing TextInput fields with a specific AutoComplete control, you can simply point the manager to one or more TextInputs, and you'll get a slick pop-up or auto-fill interaction.

Getting Started: AutoCompleteManager for Flex 3

AutoCompleteManager is not a visual control, but manifests itself as one. You can place an instance of AutoCompleteManager in your Flex application, and point it to one or more TextInput controls. Based on the id of those controls, an auto-completion pop-up or auto-fill will occur.

Creating an AutoCompleteManager with a TextInput
Creating an AutoCompleteManager with a Form
Creating a Standalone AutoComplete Field with Custom Data

Creating an AutoCompleteManager with a TextInput

You can create an AutoCompleteManager in MXML very easily. First, you must import the yahoo namespace for the Astra Flex controls. Simply add xmlns:yahoo="http://www.yahoo.com/astra/2006/mxml" to your application or MXML component declaration.

To tell AutoCompleteManager which TextInput controls you want it to work with, use the target property (for one item) or targets property (for multiple items).

Screen capture of AutoCompleteManager Simple Example

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

Download the MXML example file.

Creating an AutoCompleteManager with a Form

You can also point the target to a Form or other Container to have it work with all TextInputs in the container. You can event point it to your entire application to enable it on all TextInput fields in the application.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	xmlns:yahoo="http://www.yahoo.com/astra/2006/mxml">
	layout="absolute" 
	applicationComplete="setUp(event)" 
<mx:Script>
	
	import mx.events.FlexEvent;	
	import mx.controls.Alert; 
	
	//Set up event listeners
	public function setUp(event:FlexEvent):void
	{
		autoCompleteMgr.addEventListener("entriesSaved", onEntriesSaved);
	}
	
	//Call the method to manually save entries to AutoCompleteManager
	public function submit():void
	{
		autoCompleteMgr.saveEntries();
	}
	
	//Called when entries have been saved
	public function onEntriesSaved(event:Event):void
	{
		Alert.show("Your entries have been saved", "Form Submitted Successfully");
	}
	
	
</mx:Script>

<yahoo:AutoCompleteManager id="autoCompleteMgr" 
		target="{form}" 
		/>
	
	<mx:Form id="form" defaultButton="{submitButton}" left="20" top="20">
		<mx:FormItem label="Full Name:">
			<mx:TextInput id="textInput1" left="26" top="56"/>
		</mx:FormItem>
		
		<mx:FormItem label="Phone Number:">
			<mx:TextInput id="textInput2" left="26" top="86"/>
		</mx:FormItem>
		
		<mx:FormItem label="Email Address:">
			<mx:TextInput id="textInput3" left="26" top="116"/>
		</mx:FormItem>
		
		<mx:FormItem>
		
		<mx:Button id="submitButton" x="121" y="164" label="Submit" click="submit()"/>
		</mx:FormItem>
	</mx:Form>
	
</mx:Application>

Screen capture of AutoCompleteManager Form Example

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

Download the MXML example file.

Creating a Standalone AutoComplete Field with Custom Data

You can even use AutoCompleteManger like a typical AutoComplete control with your own custom data. The following example shows a single TextInput with auto-completion coming from a list of airports. It uses a custom filter function to allow filtering based on not only one field, but multiple fields. That way, in this example, you can type in a city, airport code, or airport name. Using the minCharsForCompletion property, this example will only display auto-complete when three or more characters have been typed into the field.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	xmlns:yahoo="http://www.yahoo.com/astra/2006/mxml">
	layout="absolute" 
<mx:Script>
	
		private function airportFilterFunction(element:*, text:String):Boolean 
		{
			var regExp:RegExp = new RegExp(text,autoCompleteMgr.caseSensitive?"":"i");
		    
			var b:Boolean = regExp.test(element.city.toString()) ||
							regExp.test(element.name.toString()) ||
							regExp.test(element.code.toString());
		
			return b;
		}
	
</mx:Script>
	<yahoo:AutoCompleteManager 
		id="autoCompleteMgr" 
		target="{textInput1}"
		dataProvider="{airports.airport}"
		labelField="name"
		filterFunction="{airportFilterFunction}"
		minCharsForCompletion="3" />
	
	<mx:XML id="airports">
		<airports>
		 
		  <airport>
		    <city>Chicago</city>
		    <name>Chicago O'Hare International</name>
		    <code>ORD</code>
		    <country>USA</country>
		  </airport>
	
		  <airport>
		    <city>San Francisco</city>
		    <name>San Francisco International</name>
		    <code>SFO</code>
		    <country>USA</country>
		  </airport>
		  
	      ...
	    
		</airports>
	</mx:XML>
	
	<mx:Label x="74" y="50" text="Try an airport or airport code:" fontWeight="bold"/>
	<mx:Label x="74" y="67" text="example: "ORD", "Chicago", or "O'Hare"" fontWeight="normal" fontStyle="italic"/>
	<mx:TextInput id="textInput1" left="74" top="93" width="247"/>
	
</mx:Application>

Screen capture of AutoCompleteManager DataProvider Example

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

Download the MXML example file.

For additional topics, please read Using AutoCompleteManager, or take a look at the Examples section for functional demonstrations. The ActionScript 3.0 Class Reference contains full details on every property, method, and style available to the AutoCompleteManager component.