SteveMcKeogh.co.uk - Web Developer

This is quite a neat little feature that I have used on a few sites now, unfortunately this only works on Safari, but its worth putting it in for that alone.

For those who don't know, or are unsure what I am talking about, when I say "Mac OS X style search fields" I mean like the below:

These style search fields are used a lot on OS X (Safari, iTunes etc) and Apple have their own html syntax to get this into web pages. As this only works in Safari, you will have to have an alternative for other browsers, but its easy to capture this in the code (well I will show you in ColdFusion).

To get this field into your .cfm page, look at the following:

<cfif lcase(cgi.http_user_agent) contains "safari">
<!--- safari ---><input type="search" autosave="bsn_search" results="5" name="kwd" ... /> <cfelse>
<!--- non safari ---> <input type="text" name="kwd" ... /> </cfif>

So as you can see from the above, it's just a simple <cfif> to check whether the browser is Safari, if so it shows the special Safari only syntax, otherwise it shows the non Safari version.

The Safari only version not only has the appearance of the OS X style search fields, but it's functional as well. The small magnifying glass on the left will drop down and show the user any recent searches they have made on the site, the results="5" defines the amount of results to pull back here.