FLEX 仿Google聯(lián)想框效果

更新時間：2009年07月03日 15:45:53 作者：

FLEX--仿Google聯(lián)想框效果--現(xiàn)在好多地方都用到了這樣的效果,當然,現(xiàn)在Google下線了,不讓用了,但是跟網(wǎng)上說的一樣,想辦法,它還是能出來的

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

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

然后就是處理效果，這些內容都是從數(shù)據(jù)庫得到的數(shù)據(jù)，動態(tài)的查出的。

復制代碼代碼如下:

import mx.collections.ArrayCollection; 
            import mx.events.FlexMouseEvent; 
            import mx.events.ListEvent; 
            import mx.managers.PopUpManager; 

            import resources.com.list.Association; 

            // 經(jīng)過渲染的聯(lián)想結果List 
            private var list:Association; 
            // 臨時字符串,用于判斷當keyUp事件發(fā)生時,聯(lián)想框的值是否發(fā)生改變,如未改變則不聯(lián)想 
            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 { 
                // 每次打開聯(lián)想框以前, 先清理緩存 
                if(list != null){ 
                    // 將聯(lián)想框從PopUpManager中移除 
                    PopUpManager.removePopUp(list); 
                    // 清空聯(lián)想框實例 
                    list = null; 
                } 

                list = new Association(); 
                //指定數(shù)據(jù)源 
                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); 
            } 
            /**--------------------------聯(lián)想-------------------------------**/

還有一個類，這里也貼出來吧。呵呵，共享原則，完全可實現(xiàn)。

復制代碼代碼如下:

<?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聯(lián)想框效果--現(xiàn)在好多地方都用到了這樣的效果,當然,現(xiàn)在Google下線了,不讓用了,但是跟網(wǎng)上說的一樣,想辦法,它還是能出來的.呵呵,不過對于我們沒有多少必要了.這里在Flex當中也是為了能夠更好的實現(xiàn)查詢效果.所以也要求做這么一個,動態(tài)查詢.