如何在Flex中创建自定义自动完成组件？

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

目前我使用类似

PopUpManager.addPopUp(popup, parentComponent);

我弹出类扩展垂直框中，然后它延伸在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; 
}

来源

2010-11-30 Bernard Igiri

最后我想通了如何使用列表控件和我停止使用工厂产生的部件，而不是我用的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/

来源

2010-12-01 22:19:23