SSbits - Home page
Site by Carbon Crayon
Submit a Post >

Snippets - Little bits of code to make you happy

Clearing the Search field on click with jQuery

As with everything, it's attention to detail that makes great sites. One thing that really bugs me is when a site has a search box with the word 'search' inside it but which does not clear it self when clicked, meaning I have to clear it before I can search. Given it can be achieved with a few lines of jQuery, it's a real surprise how many sites fail to implement this, or that still use the 'onclick' inline javascript event. 

To implement this on a SilverStripe site, create a file called jquery.utils.js and place it in your mysite/javascript directory. This is the file where you can put all the custom jQuery for your site.

This will include our file in the page as well as the latest jQuery compacted library, which is kindly hosted for us by google, meaning there is a good change that the user may have it cached already. So now lets actually add some jQuery to the file jquery.utils.js

//Clears fields on click
function clearField(form) {
		jQuery(form).find("input.text, textarea").each(function(){	
			this.defaultValue = this.value;
			jQuery(this).click(function(){
				if(this.value == this.defaultValue){
					jQuery(this).val("");
				}
				return false;
			});
			jQuery(this).blur(function(){
				if(this.value == ""){
					jQuery(this).val(this.defaultValue);
				}
			});
		});
}

We now have a function that will both clear and re-insert whatever value is in a field when the page loads. All you have to do is feed the function the id of the form and it does the rest! So finally all we need to do to get SilverStripe to run this code is add it to our Page.php init() function (in the Page_Controller class) like so:

Requirements::javascript("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");
Requirements::javascript("mysite/javascript/jquery.utils.js");
Requirements::customScript('
	jQuery(document).ready(function() 
	{
		clearField("#SearchForm_SearchForm");
	});
');

This will work with any form that have either text inputs or textarea fields.

Aram Balakjian avatar

Aram Balakjian

Aram is a web developer running London based agency Aab Web. He has a strong passion for developing attractive, usable sites around the SilverStripe CMS.

  • Rick Harvey
    03/01/2011 11:13pm (3 years ago)

    Enjoyed your Snippet!

    Some nice tweeks might be to (be able to) set the text and style of the "hint" for any input or textarea fields. For example, I use the following jQuery plugin...

    * Requirements::customScript:
    jQuery(document).ready(function() {
    jQuery("#SearchForm_SearchForm_Search").inputHint("Search");
    });

    * jquery.utils.js:
    (function(jQuery) {
    var hintClass = "jqueryhint";
    jQuery.fn.inputHint = function(hint) {
    return(this.each(function() {
    var field = $(this).addClass(hintClass).val(hint);
    field.focus(function() {
    if(field.val() == hint)
    field.removeClass(hintClass).val("");
    }).blur(function() {
    if(field.val() == "")
    field.addClass(hintClass).val(hint);
    });
    }));
    }
    })(jQuery);

    * in form.css:
    input.jqueryhint { color: #999; }

    BTW - I use "focus" (rather than "click") in case people "tab" into the field area... :-)

  • ian holmes
    12/01/2011 12:36pm (3 years ago)

    Nice snippet - I have taken the idea a little further and created a small jQuery plugin:

    (function($) {
    $.fn.overLabel = function() {
    return this.focus(function() {
    if (this.value == this.defaultValue) {
    this.value = '';
    }
    }).blur(function() {
    if (!this.value.length) {
    this.value = this.defaultValue;
    }
    });
    };
    })(jQuery);

    To use this:

    $(<selector here>).overLabel();

    This means I can target a single DOM element easily...

    Cheers!

  • Terry Apodaca
    01/09/2011 7:21pm (3 years ago)

    I use this all the time...but, it has stopped working in IE 9. Have you seen this, and if so, do you know of a fix?

  • Terry Apodaca
    01/09/2011 7:46pm (3 years ago)

    the code I got to work in IE9 was (if you want to try and modify your code above):

    var searchBox = $("#SearchForm_SearchForm_Search");
    var searchBoxDefault = "Search";
    searchBox.focus(function(){
    if($(this).attr("value") == searchBoxDefault) $(this).attr("value", "");
    });
    searchBox.blur(function(){
    if($(this).attr("value") == "") $(this).attr("value", searchBoxDefault);
    });

Post a comment ...

You cannot post comments until you have logged in. Login Here.

Advertisement

Site of the Month

Find SSbits on

Top Contributers

Rank Avatar Name
1 article image Aram Balakjian
2 article image Daniel Hensby
3 article image Marcus Dalgren
4 article image Hamish Campbell
5 article image Ty Barho
6 article image njorndare
7 article image Martijn van Nieuwenhoven
8 article image Darren-Lee
9 article image Roman Schmid
10 article image Matt Clegg

View full leaderboard


Advertisement