FLEX--仿Google聯想框效果

首先是事件源，也就是從何而起，如下的一個輸入框：

 

<mx:FormItem label="集團客戶:" width="42%"> <!--change1--> <mx:TextInput id="txtAssociation" width="235" maxChars="32" change="associate();"/> </mx:FormItem>

然後就是處理效果，這些內容都是從數據庫得到的數據，動態的查出的。

 

import mx.collections.ArrayCollection; import mx.events.FlexMouseEvent; import mx.events.ListEvent; import mx.managers.PopUpManager; import resources.com.list.Association; // 經過渲染的聯想結果List private var list:Association; // 臨時字符串,用於判斷當keyUp事件發生時,聯想框的值是否發生改變,如未改變則不聯想 private var temp:String = ''; private function changeAssociation():void{ temp=''; txtAssociation.text=''; associationResult=null; if(list != null){ PopUpManager.removePopUp(list); list = null; // 清空臨時字符串 } } private function associate():void { var str:String = txtAssociation.text; if(str.length<2){ associationResult=null; } if (str != temp) { if(str.length < 2){ if(list != null){ PopUpManager.removePopUp(list); list = null; // 清空臨時字符串 temp = ''; } return; } temp = str; var params:Object = {}; params['areaNO'] = cbxArea.selectedItem.data; params['netType'] = cbxNetType.selectedItem.data; params['str'] = str; params['handle'] = 'associate'; service4association.send(params); } } private function openAssociation():void { if(service4association.lastResult.items != null) createAndShow(service4association.lastResult.items.item); else if(list != null){ PopUpManager.removePopUp(list); list = null; // 清空臨時字符串 temp = ''; } } private function createAndShow(dp:Object):void { // 每次打開聯想框以前, 先清理緩存 if(list != null){ // 將聯想框從PopUpManager中移除 PopUpManager.removePopUp(list); // 清空聯想框實例 list = null; } list = new Association(); //指定數據源 list.dataProvider = dp; //獲取鼠標座標並賦值給list list.x = txtAssociation.x + 219; list.y = txtAssociation.y + 205; //大小 list.minWidth = 400; list.maxHeight = 270; //註冊list外鼠標按下和項目單擊事件 list.addEventListener(FlexMouseEvent.MOUSE_DOWN_OUTSIDE, mouseDownOutsideHandler); list.addEventListener(ListEvent.ITEM_CLICK, itemClik); //彈出並顯示list PopUpManager.addPopUp(list, this, false); } private var associationResult:Object; private function itemClik(event:ListEvent):void{ associationResult = ArrayCollection(Association(event.target).dataProvider).getItemAt(event.rowIndex); txtAssociation.text = associationResult.label; //Alert.show(associationResult.data); removePopUpIDisplay(Association(event.target)); } private function mouseDownOutsideHandler(event:MouseEvent):void{ removePopUpIDisplay(Association(event.target)); } private function removePopUpIDisplay(obj:Association):void{ // 清空臨時字符串 temp = ''; obj.removeEventListener(FlexMouseEvent.MOUSE_DOWN_OUTSIDE, mouseDownOutsideHandler); PopUpManager.removePopUp(obj); } /**--------------------------聯想-------------------------------**/

還有一個類，這裏也貼出來吧。呵呵，共享原則，完全可實現。

 

<?xml version="1.0" encoding="utf-8"?> <mx:List xmlns:mx="http://www.adobe.com/2006/mxml" initialize="initApp();" xmlns:filters="flash.filters.*" alternatingItemColors="[#EEEEEE, white]" buttonMode="true" > <mx:Script> <!--[CDATA[ private function initApp():void{ showEffect.play(); } ]]--> </mx:Script> <mx:itemRenderer> <mx:Component> <mx:HBox horizontalGap="0" paddingLeft="5"> <mx:Image source="@Embed('resources/icons/building.png')"/> <mx:Text text="{data.prefix}" paddingLeft="5"/> <mx:Text text="{data.str}" color="green"/> <mx:Text text="{data.suffix}"/> </mx:HBox> </mx:Component> </mx:itemRenderer> <mx:Parallel id="showEffect" target="{this}" duration="300"> <mx:Fade /> <mx:WipeDown /> </mx:Parallel> </mx:List>

 

 

FLEX--仿Google聯想框效果--現在好多地方都用到了這樣的效果,當然,現在Google下線了,不讓用了,但是跟網上說的一樣,想辦法,它還是能出來的.呵呵,不過對於我們沒有多少必要了.這裏在Flex當中也是爲了能夠更好的實現查詢效果.所以也要求做這麼一個,動態查詢.