How do you make a custom auto complete component in Flex?

Question

I need to make an auto complete component in flex that fetches the auto complete results from a remote database using a webservice. I have the webservice and querying part worked out. I've already made custom components in action script by extending VBoxes. However I cannot figure out how to generate the popup window that is supposed to show under the text input in my auto complete text box.

Currently I am using something like

PopUpManager.addPopUp(popup, parentComponent);

My popup class extends VBox and it extends the createChildren method as follows

protected override function createChildren():void
{
  for (var i:int = 0; i < results.length; i++) {
    var itemC:UIComponent =
        factory.getComponent(results[i]);
    addChild(itemC);
    itemC.addEventListener(MouseEvent.CLICK,
        getClickFunction(i));
}

private function getClickFunction(index:int):Function {
    return function (event:MouseEvent):void
        {
            selectedIndex = index;
        };
}

Unfortunately when the webservice retrieves its results and addPopUp is called, nothing shows up.

Currently the factory.getComponent method is executing this code

public function getComponent(user:Object):UIComponent
{
    var email:Label = new Label();
    email.text = user.email;
    var name:Label = new Label();
    name.text = user.displayName;
    var vbox:VBox = new VBox();
    vbox.addChild(name);
    vbox.addChild(email);
    return vbox;
}

Answer 1

I think you ought to look for someone who has already implemented this. While your issue is probably related to not positioning and sizing the component before calling addPopup() even if we helped you solve that you still have a lot more work todo. (BTW call super.createChildren in your override or else bad things will happen). Anyway, check this out:

http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=1047291

Answer 2

Finally I figured out how to use the List control and I stopped using a factory to generate components, instead I use the itemRenderer feature in the list control. I also used that to replace the custom popup class, and I added a positioning function to be called later. By combining these things I was able to get the drop down to display as expected. It appears that some components do not work well as pop ups.

Regardless, the working pop up code is

Inside my autocomplete component which extends HBox

dropDownList = new List();
dropDownList.itemRenderer = itemRenderer;
dropDownList.dataProvider = results;
dropDownList.labelFunction = labelFunction;
dropDownList.rowCount = results.length;
dropDownList.labelFunction = labelFunction==null ?
    defaultLabelFunction : labelFunction;
dropDownList.tabFocusEnabled = false;
dropDownList.owner = this;
PopUpManager.addPopUp(IFlexDisplayObject(dropDownList), DisplayObject(this));
callLater(positionDropDownList);

Method in the autocomplete component (textInput is my text field)

public function positionDropDownList():void {
    var localPoint:Point = new Point(0, textInput.y);
    var globalPoint:Point = localToGlobal(localPoint);
    dropDownList.x = globalPoint.x;
    var fitsBelow:Boolean = parentApplication.height - globalPoint.y - textInput.height > dropDownList.height;
    var fitsAbove:Boolean = globalPoint.y > dropDownList.height;
    if (fitsBelow || !fitsAbove) {
        dropDownList.y = globalPoint.y + textInput.measuredHeight;
    } else {
        dropDownList.y = globalPoint.y - dropDownList.height;
    }
}

The position function was code that I borrowed from http://hillelcoren.com/flex-autocomplete/