Home
 

05

Aug

11

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. For an example of this in action, simply click the search box to your right.

To implement this on a SilverStripe site, create a file called jquery.clear.search.js and place it in your mysite/javascript directory. Then in your Page.php innit() function (in the controller class) add the following line:
 

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.clear.search.js:

If you are new to jQuery this may look a little daunting, but once you get familiar it really is very simple. The first line just tells jQuery to wait until the document is loaded before running the script. The next line gets the value of the search field when the page loads. Then we apply a function to the field it each time it is clicked. This function checks to see if the value of the field matches the default value and if it does, it clears it. 

That's it! You now have a self clearing search box which picks up the value to clear dynamically, so should also work fine with multilingual sites.

Note. We use the full jQuery call instead of the abbreviated $ to avoid conflicts with prototype. You could instead wrap your code in (function($) { [code here] }(jQuery); which would allow you to use the $ variable.

Special thanks to Lerni for suggesting the post and providing the jQuery code.

About the Author

Name: Aram Balakjian

Website: http://www.aabweb.co.uk

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

Comments (10)

  • A young boy and his dad went out fishing one fine morning. After a few quiet hours out in the boat, the boy became curious about the world around him. He looked up at his dad and asked "How do fish breath under water?"His dad thought about it for a moment, then replied, "I really don't know, son."The boy sat quietly from another moment, then turned back to his dad and asked, "How does our boat float on the water?"Nnce again his dad replied, "Don’t know, son."Pondering his thoughts again, a short while later, the boy asks "Why is the sky blue?"Again, his dad replied. "Don’t know, son."The inquisitive boy, worried he was annoying his father, asks this time "Dad, do you mind that I'm asking you all of these questions?""Of course not son." replied his dad, "How else are you ever going to learn anything?"

    Posted by replica watches, 06/07/2010 4:37am (2 months ago)

  • 23131s

    Posted by aatos, 04/07/2010 1:21am (2 months ago)

  • Comment below: That's what I used.

    Posted by brickaction, 26/04/2010 7:13pm (4 months ago)

  • $(document).ready(function() {
    $('#search_click').click(function() {
    $(this).val('');
    });
    });

    Posted by brickaction, 26/04/2010 7:13pm (4 months ago)

  • Nice snippet - easier than including yet another jQuery plugin. You may want to enhance this snippet to restore the default text.

    Modified code follows (for those interested):

    jQuery(document).ready(function() {
    var searchBox = jQuery(\'#SearchForm_SearchForm_Search\');
    var defaultValue = searchBox.val();
    searchBox.click(function() {
    if( this.value == defaultValue ) {
    jQuery(this).val(\"\");
    }
    });
    searchBox.blur(function() {
    if(jQuery.trim(this.value) == \"\") {
    jQuery(this).val(defaultValue);
    }
    });
    });

    Posted by Raithlin, 17/03/2010 7:38am (6 months ago)

  • Thanks for clearing that up Marcus, I was a little confused about the difference tbh. I have edited the post to reflect this.
    Cheers :)

    Posted by Aram , 17/08/2009 10:56am (1 year ago)

  • I'm probably being way to nitpicky here, but there is a valid reason for writing this.id or this.val instead of $(this).attr('id') and $(this).val(), namely that the native accessors are faster.

    So when the native ways of doing things are easy and reliable, use those, when not - don't.

    Posted by Marcus, 17/08/2009 9:26am (1 year ago)

  • thanks for your suggestions guys, I have now edited the post removing the plain javascript stuff and replacing ti with jQuery and adding a defaultValue to the code to make it work with multilingual sites without the need for the longer function. I also added a note about suing the (function($){ stuff.
    Thanks again for all your inputs!

    Aram

    Posted by Aram, 17/08/2009 5:51am (1 year ago)

  • Also you can wrap it in
    (function($) {
    // Your code here
    })(jQuery);
    and you can use the $ sign without worrying about any conflicts.

    Posted by Marcus, 13/08/2009 2:56pm (1 year ago)

  • http://plugins.jquery.com/project/defaultvalue

    Posted by Dan Rye, 07/08/2009 2:26pm (1 year ago)

RSS feed for comments on this page RSS feed for all comments

Post your comment