Actually, this specific searchform is to be found in nearly every Apple software-product. Also in the Safari browser. And since this rounded and functional searchform integrates nicely with a website, I wanted it to display and behave this way in every browser.

The Apple searchforms feature:

• realtime ‘on-type’-search on your music
• a small magnfying glass to select where to search
• a small button to clear the search field when something is typed into it.
• a dropdown menu to select search options (disregarded in this project)

Here is a quick screenshot of how the searchform looks in iTunes. Well, it has a white background insted of a ‘digital-green’ but the background of the iTunes title-display has that color. So I combined them into this:

I did a quick thought on how I could realise this functionality to use it for the searchform on my site and still keep it an accessible searchform.

The solution is close: It can easily be done using JavaScript and CSS to style it like Apple-Candy. For now I didn’t implement the option dropdown but this is also easy to realise by using e.g. an unsorted list.

Quick ‘n Dirty

You can see the implemented searchform in my sidebar.

Meanwhile, I’ve switched my WordPress theme and discarded the example searchform. But I’m currently working on a new implementation as JavaScript Object Notation. It’s already live for testing purposes. New graphics are also in progress.

Go for the code:

• Here’s the JavaScript
• Here’s the CSS

References & Annotations

Documentations and things I discovered during research and development

• To make the border of an input invisible you have to set border-style: hidden (none doesn’t work).

• Handling cross browser key press events in JavaScript
• The DOM Form object

Known Bugs

• Button background images still don’t work properly in Opera
• Reset button doesn’t hide on form reset

Feel free to post a comment if you like (or do not like) the new search. I would also appreciate the reporting of further bugs/fixes and suggestions for improvement. Experts to the front!

RT @dertimbo A searchform like in iTunes

Posted in Design, Developing, Tags:Apple, css, html, searchform

Possibly Related Entries

• Perfect iTunes Equalizer Settings
• Apple’s “One more thing”
• Ajax LoadingMessage in JSON
• 5 Design Flaws In The MySpace Audio Player