As the by-product of an enterprise project I have built an AutoComplete component in Flex 4.
Using the new Spark architecture component logic and appearance can be separated in a clean way.

Here is a demo app showing two ways of usage:

Click here to view source code and download project. You will need Flash Builder Beta 2 to compile the 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;
            }
        }
    }