Magically Disappearing Default Search Text

Keeping a site's design as clean as possible is something all (well, okay, maybe not "all") designers and developers strive for. One relatively easy thing that you can do towards this goal is removing the supporting (and often unnecessary) text around your site's search field. I'm talking about the "Enter search terms" or "Search this site" text that floats innocently above or next to the text input box. Is this really necessary? I don't think so.

default Drupal search block

A much cleaner way of presenting a search box is with some default text inside the input field that automatically disappears when the user moves the cursor into the field.

There's a couple of things you'll need to do in order to accomplish the goal. First, you'll need to remove the default "Search this site:" text. This can be done with either some CSS such as


#search-block-form label {display: none;}

or by removing the text via a theme preprocess function for the search block (a much more bulletproof way). This second method gives you access to the search form array before it is translated into HTML. Once you have access to the array, you can make your modifications (removing the "Search this site:" text) and then return it to be processed as normal.

The code you're going to write will be put into your theme's template.php file. For this example, I'm using the Zen Classic theme, a sub-theme of the Zen theme. It shouldn't matter what theme you're using, though.

The preprocess form you'll be adding to your template.php file is fairly straight-forward:


function zen_preprocess_search_block_form(&$vars, $hook) {
// Remove the title of the search form
unset($vars['form']['search_block_form']['#title']);
// Rebuild the rendered version (search form only, rest remains unchanged)
unset($vars['form']['search_block_form']['#printed']);
$vars['search']['search_block_form'] = drupal_render($vars['form']['search_block_form']);
// Collect all form elements to make it easier to print the whole form.
$vars['search_form'] = implode($vars['search']);
}

The first line inside the function actually removes the default text. The next little section rebuilds the rendered version of the form and the last section puts all the search form elements into a single variable to make it easier to output. Don't forget to modify the name of the function with your theme's name. For example, if your theme is named "lizard", then the name of this function should be "lizard_preprocess_search_block_form".

Once that is done, you can clear your site's cache and take a look at your now default-text-less search block. So far, so good.

Drupal search block with default text removed

The next step is to actually get your new default text into the search input box. You're going to need to download the "jQuery Form Example Plugin" from http://plugins.jquery.com/project/example. This jQuery plugin will do pretty much all the heavy lifting from here on out.

Extract the plugin and put the "jquery_example" directory into your theme's directory. I like to put all my javascript files in one place, so I like to create a "scripts" directory inside my theme directory. In my case, I placed the "jquery_example" folder in zen/zen_classic/scripts/.

The plugin uses a single function, ".example()" that takes a string of default text as its input. So, you'll need to create a new javascript file to call the function. I created a "searchtext.js" file and placed it in my zen/zen_classic/scripts directory. The javascript code in the file is as follows:


if (Drupal.jsEnabled) {
$(document).ready(function(){
$('form#search-block-form input.form-text').example('Enter search terms');
});
}

The meat of the code should be easy to follow. I'm just using a jQuery selector to select the search block's text input field, then applying the "example" function to it, setting the default text to "Enter search terms".

There's one more thing you need to do in order to see it in action - you need to tell your theme to load the jQuery Form Example Plugin as well as your new searchtext.js file. You can do this by modifying your theme's .info file by adding the following lines:


scripts[] = scripts/jquery_example/jquery.example.min.js
scripts[] = scripts/searchtext.js

Once this is done, you can go ahead and clear the cache again and be impressed with yourself. Nicely done!

Drupal search block with black default text.

There's one more cool little thing you can do in order to really make it look good. The jQuery Form Example Plugin "example()" function can take a second paramter as well - a CSS class name with which the default text will be styled with. This allows you make the default text a different color than the text that gets entered by the user. To use this feature, change your searchtext.js file to this:


if (Drupal.jsEnabled) {
$(document).ready(function(){
$('form#search-block-form input.form-text').example('Enter search terms', {className: 'search_example'});
});
}

Then, create a "search_example" definition in your theme's .css file specifying how you want the default search text to appear. In my case, I made it grey:


.search_example {
color: #CCCCCC;
}

Clear the cache and reload the page to be dazzled.

Drupal search block with gray default text.

While putting jQuery plugins into your theme isn't a terrible idea, you may want to check out the jQuery Plugin Handler module - this provides a nice clean way to manage your jQuery plugins to keep them all in once place and to avoid dupliation and conflicts.

Comments

Author comment

Greg,

Actually, it looks like someone already ported it to 6.x in the issue queue - it probably just need some testing and for the maintainer to notice that he's got a 6.x version (almost) ready for release.

Thanks for the heads-up, I wasn't aware of that module!

-mike

This works well in FF, but the Search button moves into the textbox for IE7. Anyone figured out a fix for this?

Submitted by Guest (not verified) on Sat, 04/18/2009 - 15:59

Great guide, it works -- also with views!

I tried the compact_forms module, but couldn't make it work with a view I had created. Your solution gave me the flexibility to just grab the id's of the view form fields and insert them into searchtext.js file.

Thanks,
-ras

Submitted by ras (not verified) on Mon, 07/06/2009 - 11:30

Hey Mike,

I was searching for this solution and was so glad to have found your post. Thanks so much.
I did have to adjust a bit given that I am using my own Zen subtheme (moc) and using the theme search rather than the search block. I followed your directions with these changes:

In the template.php file I used this

function moc_preprocess_search_theme_form(&$vars) {
// Remove the title of the search form
unset($vars['form']['search_theme_form']['#title']);
// Rebuild the rendered version (search form only, rest remains unchanged)
unset($vars['form']['search_theme_form']['#printed']);
$vars['search']['search_theme_form'] = drupal_render($vars['form']['search_theme_form']);
// Collect all form elements to make it easier to print the whole form.
$vars['search_form'] = implode($vars['search']);
}

I also adjusted my searchtext.js file as well:

$('form#search-theme-form input.form-text').example('I want to learn about...');

My question is regarding the first line. In your example it reads:
preprocess_search_block_form(&$vars, $hook)
I was getting argument errors for that line and I removed the "$hook" and the error went away and everything is working. Is this correct? Am I doing anything wrong? I'm worried that even though it's working, that I may be doing something I shouldn't.
Thanks for any help,
Dan

Submitted by Dan (not verified) on Tue, 08/18/2009 - 23:36

Awesome! This was really helpful- thanks for the post.

Submitted by RockSoup (not verified) on Mon, 12/13/2010 - 12:18