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.
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.
I almost always have a site specific module that I name “[sitename]_addon” where I put all the custom bit and pices of code that the site needs. The search field is usally on every page so I use hook_menu() to add the JavaScript file. Here I also insert the text string that I want to appear in the search field as a placeholder/hint. Doing it this way makes it possible to use the Drupal locale module to translate it.
In all the code below you should replace “example” with something that suits you, the site name for example.
/**
* Implementation of hook_menu().
*/
function example_addons_menu($may_cache) {
if (!$may_cache) {
drupal_add_js(drupal_get_path('module', 'example_addons') .'/example_addons.js');
drupal_add_js(array('example' => array('search' => t('Search on @site', array('@site' => variable_get('site_name', 'Drupal'))))), 'setting');
}
}Here is the jQuery JavaScript file.
In all the code below you should replace “example” with something that suits you, the site name for example.
// $Id: example_addons.js,v 1.10 2008/02/03 15:12:04 foo Exp $
// Original text hint code from http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/
jQuery.fn.texthint = function (title) {
return this.each(function (){
// get jQuery version of 'this'
var t = jQuery(this);
// only apply logic if the element has the attribute
if (title) {
t.attr('size', '16');
t.css('color', '#999');
// on blur, set value to title attr if text is blank
t.blur(function (){
if (t.val() == '') {
t.val(title);
t.css('color', '#999');
}
});
// on focus, set value to blank if current value
// matches title attr
t.focus(function (){
if (t.val() == title) {
t.val('');
t.css('color', '#000');
}
});
// clear the pre-defined text when form is submitted
t.parents('form:first()').submit(function(){
if (t.val() == title) {
t.val('');
t.css('color', '#000');
}
});
// now change all inputs to title
t.blur();
}
});
}
// Global killswitch
if (Drupal.jsEnabled) {
$(document).ready(function() {
if($.browser.safari) {
$('input#edit-search-theme-form-keys, input#edit-search-block-form-keys').attr({
type: 'search',
autosave: 'com.example.search',
results: '9',
placeholder: Drupal.settings.example.search,
size: '20'
});
}
else {
$('input#edit-search-theme-form-keys, input#edit-search-block-form-keys').texthint(Drupal.settings.example.search);
}
// Hide the search button.
if ($('#search').length > 0) {
$('#search #edit-submit').hide();
}
if ($('#block-search-0').length > 0) {
$('#block-search-0 #edit-submit').hide();
}
});
}
Comments
Post new comment