Using AutoCompleteManager in Flex 3

In Getting Started, we looked at the basic usage of AutoCompleteManager. Let's see what this thing can do. In this more complex example, we show most of the features of AutoCompleteManager, such as disabling of the component as well as setting whether we want completions to be case sensitive or not. This example won't invoke auto-completion until at least three characters have been typed. You can adjust this by using the stepper at the bottom left. Finally, you can choose whether you want this to use auto-complete data from other applications, or only use its own. For instance, the first text input control is named textInput1. When shareData is true, any other applications in the same domain which have a text input named textInput1 and use AutoCompleteManager will share the same data. All of this data can be cleared by using the button provided, and you can toggle alot of the options on or off by using the provided check boxes.

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="setUp(event)" xmlns:managers="com.yahoo.astra.mx.managers.*"> <mx:Script> <![CDATA[ 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> <managers:AutoCompleteManager id="autoCompleteMgr" target="{form}" autoSave="{autoSaveCheckBox.selected}" enabled="{enabledCheckBox.selected}" autoFillEnabled="{autoFillEnabledCheckBox.selected}" caseSensitive="{caseSensitiveCheckBox.selected}" popUpEnabled="{popUpEnabledCheckBox.selected}" forceSelection="{forceSelectionCheckBox.selected}" minCharsForCompletion="{minCharsStepper.value}" loopSelection="{loopSelectionCheckBox.selected}" shareData="{shareDataCheckBox.selected}" /> <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:VBox right="10" top="20"> <mx:CheckBox id="enabledCheckBox" label="Enable AutoComplete" selected="true"/> <mx:CheckBox id="autoFillEnabledCheckBox" label="AutoFill" selected="false"/> <mx:CheckBox id="popUpEnabledCheckBox" label="Pop Up Completions" selected="true"/> <mx:HRule width="100%"/> <mx:CheckBox id="caseSensitiveCheckBox" label="Case Sensitive" selected="false"/> <mx:CheckBox id="forceSelectionCheckBox" label="Force Selection" selected="false"/> <mx:CheckBox id="loopSelectionCheckBox" label="Loop Selection" selected="true"/> </mx:VBox> <mx:Label text="Minimum Characters to Display Completions:" left="20" bottom="12"/> <mx:NumericStepper id="minCharsStepper" value="3" minimum="1" left="285" bottom="10"/> <mx:CheckBox id="shareDataCheckBox" label="Share data with other apps" selected="true" right="10" bottom="40"/> <mx:CheckBox id="autoSaveCheckBox" label="Save data automatically" selected="false" right="26" bottom="66"/> <mx:Button id="clearButton" label="Clear Auto-Complete Data" click="autoCompleteMgr.removeAll()" right="18" bottom="10"/> </mx:Application>

Download the MXML example 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 AutoCompleteManager component.