Learning Employee Directory 3.3 Component

Return to table of contents
1. CustomAutoComplete

This component can be very useful. It pops up a list of suggestions based on characters entered by the user. This is a very simple example on how to use it:

<controls:CustomAutoComplete id="searchInput" 
typedTextChange="onTextChange();"
selectionChange="onSelectionChange();"
dataProvider="{ searchResults }"  
lookAhead="true"  
labelField="displayName"/>

And below is the the script part of the main mxml file I used to test this component.

   import mx.controls.Alert;
  
   import mx.collections.ArrayCollection;
  
   [Bindable]
   private var searchResults:ArrayCollection  = new ArrayCollection();
   private var all:ArrayCollection  = new ArrayCollection();
   private function init():void
   {
    all.addItem({displayName:"abc", name:"Jack Smith"});
    all.addItem({displayName:"abd", name:"John Win"});
    all.addItem({displayName:"abe", name:"Bob XC"});
    all.addItem({displayName:"acd", name:"LIN Bobby"});
    all.addItem({displayName:"efg", name:"xie iix"});
    all.addItem({displayName:"efv", name:"xfe abc"});
    all.addItem({displayName:"hik", name:"45 65"});
   }
   private function onTextChange():void
   {
    searchResults.removeAll();
    var ii:int;
    for(ii=0;ii<all.length;ii++)
    {
     if (all[ii].displayName.indexOf(searchInput.typedText) != -1)
      searchResults.addItem(all[ii]);
    }
   }
   private function onSelectionChange():void
   {
    mx.controls.Alert.show(searchInput.selectedItem.name);
   }