Jump to:

10928 Posts in 2612 Topics by 1809 members

All other Modules

SilverStripe Forums » All other Modules » Remove default text from Search Box onclick

Discuss all other Modules here.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1
Go to End
Author Topic: 3854 Views
  • TDNP
    Avatar
    Community Member
    19 Posts

    Remove default text from Search Box onclick Link to this post

    I have searched and read and searched and read some more but have had no luck finding a way to do this. With a typical text field you can use something simple like:

    <input onfocus="this.value=''" type="text" value="some text" />

    Is there a way to add this to the script in the SearchForm?

  • JonoM
    Avatar
    Community Member
    103 Posts

    Re: Remove default text from Search Box onclick Link to this post

    This was my approach for one project - Jquery makes it really easy to do stuff like this. I probably copied this code from a tutorial somewhere - can't recall the source but credit goes to whoever it was!

    class Page_Controller extends ContentController {
       
       public function init() {
          parent::init();
          Requirements::javascript("http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js");
          Requirements::javascript("themes/".SSViewer::current_theme()."/scripts/global.js");
          Validator::set_javascript_validation_handler('none');
       }
       ... etc.
    }

    global.js

    ;(function($) {
    $(document).ready(function() {

          //Function to clear the default value from inputs onfocus and restores the default if the value is empty onblur.
          $.fn.clearDefault = function(){
             return this.each(function(){
                var default_value = $(this).val();
                $(this).addClass('empty');
                $(this).focus(function(){
                   $(this).removeClass('empty');
                   if ($(this).val() == default_value) $(this).val("");
                });
                $(this).blur(function(){
                   if ($(this).val() == "") {
                      $(this).val(default_value);
                      $(this).addClass('empty');
                   }
                });
             });
          };
          
          //Initiate the function
          $('input#SearchForm_SearchForm_Search').clearDefault();

    })
    })(jQuery);

  • TDNP
    Avatar
    Community Member
    19 Posts

    Re: Remove default text from Search Box onclick Link to this post

    JonoM - Thank you for the quick reply. I tried this and it doesn't seem to do anything. I get no results and no errors.

    Are there any modifications that you have made to the JQuery script you are linked to? I used the one in your example and the script I have on our server. Didn't seem to make any difference. When I click in the search field, the default value "search" doesn't go away. Any other ideas?

  • JonoM
    Avatar
    Community Member
    103 Posts

    Re: Remove default text from Search Box onclick Link to this post

    Do you have FireBug installed in Firefox? Open that up and see if you have any javascript errors or if you have two copies of jquery loading. If you have two copies of jQuery try removing $SilverStripeNavigator from your page template as this pulls in some scripts that can cause conflicts. Alternatively you could call on the same copy of JQuery that $SilverStripeNavigator requires instead of the CDN copy and this would stop it loading twice and may get the script working. You can also try putting jQuery in 'noconflict' mode.

  • JonoM
    Avatar
    Community Member
    103 Posts

    Re: Remove default text from Search Box onclick Link to this post

    p.s. this is the site that code is from - it's working for me with the SilverStripeNavigator in place so you may want to have a look at it as a reference. http://www.tacsi.org.au/

  • UncleCheese
    Avatar
    4085 Posts

    Re: Remove default text from Search Box onclick Link to this post

    Sometimes it makes more sense to hard code the search form, depending on your design. You can view the source of the page, copy the contents of the whole form element, and paste it directly into your template. Then you can modify the input tag.

    But don't use an onfocus attribute. Mixing behavior and markup like that hasn't been popular since 2004. Stick to unobtrusive JS, or better yet, just use the placeholder attribute.

    <input type="text" name="search" placeholder="Enter your search term.." />

    ---------------
    Silverstripe tips, tutorials, screencasts, and more. http://www.leftandmain.com

  • TDNP
    Avatar
    Community Member
    19 Posts

    Re: Remove default text from Search Box onclick Link to this post

    Thanks Gentlemen. Hardcoding it with the placeholder worked.

  • Corry
    Avatar
    Community Member
    17 Posts

    Re: Remove default text from Search Box onclick Link to this post

    I'll add my thanks to that, Uncle Cheese. It worked beautifully once I figured a few things out that are probably obvious to most people but not to a relative beginner like me.

    In case anyone else gets caught out, when you copy/paste from the source code the action in the first line will have a specific URL (eg action="/page/subpage/SearchForm") and it may not give you the results you want (since I had copied from a dev page it was asking for a login before it would show results). Use {$Link} to get the current URL path.

    <form id="SearchForm_SearchForm" action="{$Link}SearchForm" method="get" enctype="application/x-www-form-urlencoded">

    Add your placeholder="Search ..." attribute to the text input and the rest of the form code is OK as is.
       
    Then to add your customised search from to each template, replace $SearchForm with <% include MySearchForm %> (Yes, obvious I know; at least this one only took me a few seconds to work out!)

    3854 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.