如何在 Flex 中制作自定义自动完成组件？

Question

我需要在 Flex 中制作一个自动完成组件，使用 Web 服务从远程数据库获取自动完成结果。我已经解决了网络服务和查询部分。我已经通过扩展 VBox 在动作脚本中制作了自定义组件。但是，我无法弄清楚如何生成应该显示在自动完成文本框中的文本输入下方的弹出窗口。

目前我正在使用类似

PopUpManager.addPopUp(popup, parentComponent);

My popup class extends VBox 的东西，它扩展了 createChildren 方法，如下所示。

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;
        };
}

不幸的是，当 webservice 检索其结果并调用 addPopUp 时，没有任何显示。

当前factory.getComponent方法正在执行此代码

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

我认为你应该寻找已经实施过这一点的人。虽然您的问题可能与在调用 addPopup() 之前未定位和调整组件大小有关，即使我们帮助您解决了您仍然有很多工作要做的问题。 （顺便说一句，在您的覆盖中调用 super.createChildren ，否则会发生不好的事情）。无论如何，请查看：

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

Answer 2

最后我弄清楚了如何使用 List 控件，并且不再使用工厂来生成组件，而是使用列表控件中的 itemRenderer 功能。我还用它来替换自定义弹出类，并添加了一个稍后调用的定位函数。通过组合这些东西，我能够使下拉菜单按预期显示。看来某些组件不能很好地用作弹出窗口。

无论如何，工作弹出代码位于

我的自动完成组件内部，它扩展了

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);

自动完成组件中的 HBox 方法（textInput 是我的文本字段）

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;
    }
}

位置函数是我从 http://hillelcoren.com/flex-autocomplete/