Hi I am working on a search tool for my website in Flex. I want it to work exactly like the "Spotlight" tool on MAC desktop. "http://www.recipester.org/images/6/66/How_to_Use_Spotlight_to_Search_on_Mac_OS_X_42.png" The link is to an image of spotlight.
I want to create almost the same thing in FLEX. What I currently have is a "Autocomplete" box, and I get all the data I want in it. Code for the autocomplete is below:
<auto:AutoComplete borderStyle="none" id="txt_friends_search"
textAlign="left" prompt="Search Friends" dataProvider="{all_friends_list}"
allowEditingNewValues="true" allowMultipleSelection="true" allowNewValues="true"
backspaceAction="remove" labelField="label"
autoSelectEnabled="false" matchType="anyPart"
height="23" right="400" top="1" dropDownItemRenderer="{new ClassFactory(weather.index_cloud_global_search_item_renderer)}" />
And my ItemRenderer looks like :
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox
xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="100%"
verticalGap="0" horizontalGap="0"
creationComplete="init()"
verticalScrollPolicy="off" horizontalScrollPolicy="off"
verticalAlign="middle">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.collections.ArrayCollection;
import com.hillelcoren.utils.StringUtils;
import mx.utils.StringUtil;
import mx.events.FlexEvent;
import mx.controls.List;
public function init():void
{
}
]]>
</mx:Script>
<mx:HBox width="100%" verticalGap="0" horizontalGap="0">
<mx:HBox borderThickness="1" width="75" borderStyle="solid" horizontalAlign="left" horizontalScrollPolicy="off">
<mx:Label id="type" text="{data.type}" fontSize="12"/>
</mx:HBox>
<mx:HBox borderThickness="1" width="75" borderStyle="solid" horizontalAlign="left" horizontalScrollPolicy="off">
<!--mx:Label id="nameLabel" text="{data.label}" fontSize="12"/-->
<mx:List id="names" dataProvider="{all}"
</mx:HBox>
</mx:HBox>
<!--mx:Box id="colorBox" borderStyle="solid" width="50" height="25"/-->
<mx:Spacer width="15"/>
This shows the type and label of everything, example:
- Friends ABC
- Friends XYZ
- Messages This is the message
- Messages example for messages
- Files filename1
- Files filename123
I believe you get my point there.
But what I want to create is something like:
Friends ABC XYZ Messages This is the message example for messages Files filename1 filename123 MoreFiles
Can someone plz help me in this. I actually have no idea how to move forward in this.
Let me know if you want more clarification on anything.
Regards Zeeshan