Problem:

You need to show “Search” text to the respective field in search form. When user clicks on this field, the text should disappear.

Solution:

Disappearing hint in search field using JavaScript

Add (or change) the following function in template.php file of fa current theme:

function phptemplate_preprocess_search_theme_form(&$vars, $hook) {
$form_default = t(‘Search’);
$vars['form']['search_theme_form']['#value'] = $form_default;
$vars['form']['search_theme_form']['#attributes'] = array(
‘onblur’ => “if (this.value == ”) {this.value = ‘{$form_default}’;}”,
‘onfocus’ => “if (this.value == ‘{$form_default}’) {this.value = ”;}”
);
}

Using jQuery for hiding the hint in search field

• In the settings of a current theme, enable showing of a search string – see admin/build/themes/settings
• Add (or change) the following function in template.php file of a current theme:
  

  function phptemplate_preprocess_search_theme_form(&$vars, $hook) {
  $theme_path = drupal_get_path(‘theme’, ‘arthemia’);
  $vars['form']['search_theme_form']['#value'] = t(‘Search’);
  drupal_add_js($theme_path. ‘/search_box.js’);
  }

• Create search_box.js file in a folder of a current theme with the following code:
  

  var active_color = ‘#000′; // Colour of user provided text
  var inactive_color = ‘#ссс’; // Colour of default text
  $(document).ready(function() {
  $(“input.form-text”).css(“color”, inactive_color);
  var default_values = new Array();
  $(“input.form-text”).focus(function() {
  if (!default_values[this.id]) {
  default_values[this.id] = this.value;
  }
  if (this.value == default_values[this.id]) {
  this.value = ”;
  this.style.color = active_color;
  }
  $(this).blur(function() {
  if (this.value == ”) {
  this.style.color = inactive_color;
  this.value = default_values[this.id];
  }
  });
  });
  });

Useful links:

• Theme Drupal 6 Search Box
• Customizing the search form using jQuery