Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

All other Modules /

Discuss all other Modules here.

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

Remove default text from Search Box onclick


Go to End


8 Posts   6438 Views

Avatar
TDNP

Community Member, 19 Posts

20 October 2011 at 11:42am

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?

Avatar
JonoM

Community Member, 130 Posts

20 October 2011 at 11:52am

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);

Avatar
TDNP

Community Member, 19 Posts

20 October 2011 at 12:43pm

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?

Avatar
JonoM

Community Member, 130 Posts

20 October 2011 at 12:55pm

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.

Avatar
JonoM

Community Member, 130 Posts

20 October 2011 at 12:57pm

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/

Avatar
UncleCheese

Forum Moderator, 4102 Posts

20 October 2011 at 4:28pm

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

Avatar
TDNP

Community Member, 19 Posts

21 October 2011 at 5:34am

Thanks Gentlemen. Hardcoding it with the placeholder worked.

Avatar
Corry

Community Member, 17 Posts

15 March 2012 at 11:27pm

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!)