When user starts to type into search input we use an HttpService to get search suggestions from Google.

You can notice in the code sample below that the direct url is commented out. This is because the lack of a crossdomain.xml on Google’s servers prevent Flash from calling this url. So we call a php script instead in our domain that will load the data from Google and sends it back to Flash.

You can call the direct url in a browser to see the structure of the xml result. The result is an xml list that we feed into the dataprovider of the AutoComplete.

<components:AutoComplete id="autoC" change="onChange()" labelFunction="labelFunction"
    select="search()" enter="search()" width="200" />

<s:HTTPService id="googleSuggest" result="onResult(event)"
    showBusyCursor="true"
    resultFormat="e4x" />

private function onChange(){
    var s = autoC.text;
    //googleSuggest.url = "http://google.com/complete/search?output=toolbar&q=" + s;
    googleSuggest.url = "../data/googlesuggest.php?q=" + s;
    googleSuggest.send();
}

private function onResult(event:ResultEvent){
    var xmlList:XMLList = googleSuggest.lastResult.CompleteSuggestion as XMLList
    autoC.dataProvider = new XMLListCollection(xmlList);
}

We use another HttpService to call Google Search – this time the result format is a JSON string.
No proxy is needed because this service has a crossdomain.xml in place and accepts Flash calls.

The process is simple: when user presses enter or selects a suggestion in the AutoComplete we send the text to Google.

The result is then converted from JSON into Actionscript and displayed in a datagroup.

<s:HTTPService id="googleSearch" result="onSearchResult(event)"
    showBusyCursor="true"
    resultFormat="text" />

private function search(){
    var s = autoC.text
    googleSearch.url = 'http://ajax.googleapis.com/ajax/services/search/web';
    googleSearch.request.v = '1.0';
    googleSearch.request.q = s;
    googleSearch.send();
}

private function onSearchResult(event:ResultEvent){
    var result:Object = JSON.decode(event.result as String).responseData.results;
    searchResults.dataProvider = new ArrayList(result as Array);
}

The component was updated for Flash Builder release SDK.

Here is a demo app showing two ways of usage:

Click here to view source code and download project.

You can use the following properties to customize the component:

• minChars – the number of caharcters typed by the user after which completion begins
• prefixOnly – if true, only items where the beginning matches the typed text will be offered for completion
• forceOpen – if true, list will pop-up when comp receives focus
• requireSelection – if true, first match is always selected and filled into the TextInput if user presses Tab
• dataProvider – allowed types are Array, ArrayCollection, XmlListCollection; can also be asigned dynamically, i.e. with the result of an asynchronous call
• labelField, labelFunction – standard Flex labelField and labelFunction
• returnField – set this if you want the component to fill a value different from labelField or labelFunciton
• sortFunction – function for sorting matching items, default is alphabetically ascending
• text – text of the input text
• selectedItem – selectedItem of list; read and write,set to null to reset selection
• selectedIndex – selectedIndex of list, read only

The component dispatches 3 custom events:

• select – type:CustomEvent; dispatched when user selects a list item by mouse or pressing Enter; listen to this to detect selection made by user
• enter – type:FlexEvent, enter event of the TextInput
• change – type:TextOperationEvent, change event of the TextInput

The visual appearance is defined by the skin file AutoCompleteSkin.as. The skin consist of a TextInput and a List component placed in a PopUpAnchor.

    <s:PopUpAnchor id="popUp"  displayPopUp="false"
        top="0" bottom="0" left="0" right="0"
        popUpWidthMatchesAnchorWidth="true"
        popUpPosition="below" >

        <s:Group id="dropDown" minHeight="22" width="100%">

            <s:List id="list" width="100%" minWidth="22" />

        </s:Group>

    </s:PopUpAnchor>

    <s:TextInput id="inputTxt" left="0" right="0" top="0" bottom="0" />

The logic in AutoComplete works like this: when the user types in text that matches with any items in the list we pop up the list showing these items.
There is a little trick here – all keyboard events are dispatched by the TextInput but we need to be able to select items in the list with the cursor keys. What we do is to re-dispatch some keyboard events on the list:

    private function onKeyDown(event: KeyboardEvent) : void{

        if (popUp.displayPopUp){
            switch (event.keyCode){
                case Keyboard.UP:
                case Keyboard.DOWN:
                case Keyboard.END:
                case Keyboard.HOME:
                case Keyboard.PAGE_UP:
                case Keyboard.PAGE_DOWN:
                    inputTxt.selectRange(text.length, text.length)
                    list.dispatchEvent(event)
                    break;
                case Keyboard.ENTER:
                    acceptCompletion();
                    break;
                case Keyboard.TAB:
                    if (requireSelection)
                        acceptCompletion();
                    else
                        popUp.displayPopUp = false
                    break;
                case Keyboard.ESCAPE:
                    popUp.displayPopUp = false
                    break;
            }
        }
    }