Adding text to the Search box

By default, a Search box is an empty field. To assist your website's visitors, you can add default helper text to this field using jQuery.

For example, we'll add some text in Spanish that says, "Estoy buscando..." ("I'm looking for..."). For information about adding JavaScript to your Drupal Gardens website, see JavaScript libraries. If you are a regular Drupal 7 user, you can download the Javascript libraries module.

You should save the following code in a text file and name it add-search-text.txt. Then, go to Configuration > System > JavaScript Libraries > Custom Tab, and then upload the code to the head of your website.

jQuery(function() {var theSearchBox = jQuery('#edit-search-block-form--2');var defaultSearchText = "";var preferredSearchText = "Estoy buscando..."; theSearchBox.val(preferredSearchText);   //replace the text initiallytheSearchBox.blur(function() { //replace text when search box loses focus and empty  if (jQuery(this).val().indexOf(defaultSearchText) > -1)    jQuery(this).val(preferredSearchText);    });});jQuery(document).ready(function() {    jQuery('#edit-search-block-form--2').click(function() {         jQuery('#edit-search-block-form--2').val('');	});});

The JavaScript assigns a few variables — if the Search box is empty, the code adds the text in preferredSearchText to the Search box. The code also clears the text in the Search box if a user clicks in the field. The following screenshot displays the results of the JavaScript code:

search-box-jquery.png

It's small things that can make your website more personalized and really stand out — adding default text to the Search field on your Drupal Gardens website is just one of those ways.

Contact supportStill need assistance? Contact Acquia Support