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当中也是为了能够更好的实现查询效果.所以也要求做这么一个,动态查询.