xdeb.org

The search field is an important part of almost any web site today and it deserve some attention. Especially if you have implemented some really good search like Apache Solr (see How to set up Apache Solr search for Drupal 6 on a Debian GNU/Linux server).

This is an update to an older post on the same subject but for Drupal 5. This new version is for Drupal 6 and adds jQuery 1.3+ compatibility plus some nice CSS for Firefox.

If you use Safari, or any other Webkit browser, the spiced up search field looks like a standard Mac OS X search field:

With the help of some CSS I made the spiced up Firefox search field look somewhat similar:

All this is done with JavaScript and CSS 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.

Updated version of this post: Spice up your Drupal 6 site search field with a bit of jQuery and CSS

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.

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.