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

【问题标题】：How do you make a custom auto complete component in Flex?如何在 Flex 中制作自定义的自动完成组件？
【发布时间】：2011-05-17 14:47:18
【问题描述】：

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

目前我正在使用类似的东西

PopUpManager.addPopUp(popup, parentComponent);

我的弹出类扩展了 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;
        };
}

不幸的是，当 web 服务检索其结果并调用 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;
}

【问题讨论】：

标签： actionscript-3 flex4 custom-component

【解决方案1】：

我认为您应该寻找已经实现此功能的人。虽然您的问题可能与在调用 addPopup() 之前未定位和调整组件大小有关，即使我们帮助您解决了您仍有很多工作要做。（顺便说一句，在您的覆盖中调用 super.createChildren ，否则会发生坏事）。不管怎样，看看这个：

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

【讨论】：

我发现的现有实现不适用于从远程数据源加载。他们需要立即获得结果数据。对 super.CreateChildren 的调用很好。我会看看这是否有帮助，大概就是这样。
@Bernard，虽然他们需要立即获得数据源，但您可以注册类似 showAutoComplete 之类的事件，并让侦听器与服务器对话以获取一些自动完成结果，然后更新数据提供者。或者您可以下载该源代码并对其进行编辑以允许您执行此操作。无需从头开始重新发明整个组件。
我已经修改了这个：hillelcoren.com/flex-autocomplete 我异步加载了数据，但它会在数据可用之前呈现下拉菜单，因为它不是为等待而设计的。无论哪种方式，我让它工作都为时已晚，我只需要让后端对结果更智能。我会尽快发布我的解决方案。谢谢。

【解决方案2】：

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

无论如何，工作弹出代码是

在我的扩展 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);

自动完成组件中的方法（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/借来的代码

【讨论】：