safari

Spice up your Drupal site search field with a bit of jQuery

Notice the search field here on xdeb.org? If you have JavaScript turned on you get the enhanced version with a nice placeholder/hint that disappears when you click in the field. The search button is hidden also, I assume everyone just hit return to to the search anyway so it just take up space.

If you use Safari, or any other Webkit browser, the search field is even more enhanced. Here how it looks for you who don’t use a Webkit browser.

Safari search field example

Aside from looking gorgeous, it adds value in terms of an enhanced user-experience. It works just like any other search field on Mac OS X. If you just want the nice Safari search field, take a look at http://drupal.org/project/safarisearch.

All this is done with JavaScript on the original Drupal search form ensuring graceful degradation. If you turn of JavaScript all that happens is that you get the standard search field and button.

Here follows the code I use to implement this here on xdeb.org.

Syndicate content