While thinking about how to implement and style a slick text based filter for data shown in a Flex DataGrid I stumbled upon the solution when searching for some of my favorite songs in iTunes.
The search field in iTunes offers exactly the functionality I was looking for, packed in Apple’s usual understated style.
Well, this was definitely a challenging task for me in terms of skinning.
However, I’m quite pleased with the result. The component looks appealing and fulfills its function.
But not only the nested skinning of the component was challenging. I ran into a lot of troubles with the positioning and sizing of all the sub-components. Especially the sizing of the DropDownList cost me some nerves. But after repeated insertion and deletion of width="100%" here and there it finally looked as desired.
If you want to see the result, check out the demo. Or if you are after the code and information on how to use the component, go to github. There is definitely room for improvements, code and design wise.