FLEX imitation google Lenovo Box effect _flex

The first is the source of the event, which is where to start, like an input box below:

Copy Code code as follows:

<mx:formitem label= "group Customer:" width= "42%" >
<!--change1-->
<mx:textinput id= "Txtassociation" width= "235" maxchars= "change=" Associate (); />
</mx:FormItem>

Then is the processing effect, these contents are obtained from the database data, dynamic detection.

Copy Code code as follows:

Import mx.collections.ArrayCollection;
Import mx.events.FlexMouseEvent;
Import mx.events.ListEvent;
Import Mx.managers.PopUpManager;

Import resources.com.list.Association;

The rendered associative results list
private Var list:association;
A temporary string that determines whether the value of the legend box changes when the KeyUp event occurs, and does not associate with the change.
private var temp:string = ';
Private Function Changeassociation (): void{
Temp= ';
Txtassociation.text= ';
Associationresult=null;
if (list!= null) {
Popupmanager.removepopup (list);
list = null;
Empty temporary string
}
}
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;
Empty temporary string
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;
Empty temporary string
temp = ';
}
}
Private Function Createandshow (dp:object): void {
Clean the cache before you open the legend box
if (list!= null) {
Remove the legend box from the Popupmanager
Popupmanager.removepopup (list);
Empty the Legend Box instance
list = null;
}

List = new Association ();
Specify the data source
List.dataprovider = DP;
Get mouse coordinates and assign values to list
List.x = txtassociation.x + 219;
List.y = TXTASSOCIATION.Y + 205;
Size
List.minwidth = 400;
List.maxheight = 270;
Register the mouse down and item Click events outside the list
List.addeventlistener (Flexmouseevent.mouse_down_outside, Mousedownoutsidehandler);
List.addeventlistener (Listevent.item_click, Itemclik);

Pop Up and Show 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{
Empty temporary string
temp = ';
Obj.removeeventlistener (Flexmouseevent.mouse_down_outside, Mousedownoutsidehandler);
Popupmanager.removepopup (obj);
}
/**--------------------------Association-------------------------------**/

There is also a class, here also posted it. Oh, sharing principle, fully achievable.

Copy Code code as follows:

<?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= ">"
<mx:fade/>
<mx:wipedown/>
</mx:Parallel>
</mx:List>

flex--Imitation Google Association box effect--now a lot of places have used this effect, of course, now Google offline, not to use, but the same as the internet said, to find a way, it can still come out. Hehe, But we don't have much to do with it. Here in Flex is also in order to be able to better realize the query effect. So it is also required to do such a dynamic query.