FLEX--仿Google聯想框效果--現在好多地方都用到了這樣的效果,當然,現在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當中也是爲了能夠更好的實現查詢效果.所以也要求做這麼一個,動態查詢.