Flex TextInput Control: Search Style rendering - apache-flex

Question

I have a TextInput control which has a search functionality for the people in the system.
It works fine. All I need is to style it in such a way that, it will be having search image on the right, which when clicked, will search. Its actually for look and feel part of the application, which will make the search box look much better.
It is exactly similar behavior implemented in search box embedded in Firefox.
Any solution to this?
Thanks :)

Answer 1

Ack, avoid subclassing. Think outside the Box, as it were, and use a Canvas:
<mx:Canvas>
<mx:TextInput change="doSearchFor(event.currentTarget.text)" />
<mx:Image source="search_icon.png" verticalCenter="0" right="5" />
</mx:Canvas>
Then make that a component itself if you want to make it neater. Favour composition over inheritance, in MXML as elsewhere.

Answer 2

<mx:HBox>
<mx:TextInput id = "txtSearch"/>
<mx:Image source = "yourSearchIcon.png"
click = "doSearch()"
buttonMode = "true"/>
</mx:HBox>
That's all!

Answer 3

You could write a subclass of TextInput Class which has as an image for "yourSearchIcon" image such as:
[Embed(source='../../libs/graphic_elements.swf#search_ico')]
private var searchIcon:Class;
private var searchImg:Image = new Image();
private function onCreationComplete(event:Event) : void {
searchImg.source = searchIcon;
searchImg.x = this.width - 40;
this.addChild(searchImg);
this.addEventListener(ResizeEvent.RESIZE, onResize);
}
obviously you have to handle the resize event
private function onResize(event:ResizeEvent) : void {
searchImg.x = event.currentTarget.width - 40;
}
That's your custom component

Answer 4

Hope this code will help you. This code adds a search icon to the left of the TextInput.
public class SearchInputBox extends TextInput
{
[Embed(source='../../../../assets/images/icons/searchIcon.png')]
private var searchIcon:Class;
private var searchImg:Image;
override protected function createChildren():void
{
super.createChildren();
searchImg = new Image();
searchImg.source = searchIcon;
searchImg.width=15;
searchImg.height=15;
searchImg.x = 2;
searchImg.y = 3;
setStyle("paddingLeft",searchImg.width+2);
addChild(searchImg);
}
}