Flex TextInput Control: Search Style rendering

Question

Hello, 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

Hello,

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

That's all!

---

Adrian Online Timesheet Software

Answer 2

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);
}

// ovviously 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 3

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 4

//hope this code will help you, this code add search icon to the left of the TextIput

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);

}

}