Spruce up your Drupal search box for Safari users

My favourite browser Safari has support for a snazzy custom input field type called "search". This gives the field a rounded look and the ability to remember search history (amongst other things). The major drawback is of course that the HTML will no longer validate since this feature isn't part of the official spec.

In order get around this problem I whipped up a jQuery snippet that dynamically changes the Drupal search input field to a Safari search field if the visitor uses Safari. You can see it in action in the right sidebar on this site.

This goes into template.php:

$js = "$(document).ready(function() {\n
  if (jQuery.browser.safari) {\n
    $('#block-search-0 :text').attr({ 
              type: 'search',
              autosave: 'com.yourdomain.search',
              placeholder: 'Search',
              results: '9',
            });\n
    $('#block-search-0 :submit').hide();
  }\n
});\n";

drupal_add_js($js,'inline');

I use a search block. If you use the regular search box you need to change #block-search-0 to #search-box or whatever id your theme uses. autosave is the name under which the search history is stored and should be unique for your site, results is the number of past searches to remember and placeholder is the placeholder text inside the field.

Comments

Post new comment

The content of this field is kept private and will not be shown publicly.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.