10392 Posts in 2202 Topics by 1713 members
|
Page:
1
|
Go to End | |
| Author | Topic: | 2429 Views |
-
Remove default text from Search Box onclick
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?
-
Re: Remove default text from Search Box onclick
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); -
Re: Remove default text from Search Box onclick
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?
-
Re: Remove default text from Search Box onclick
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.
-
Re: Remove default text from Search Box onclick
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/
-
Re: Remove default text from Search Box onclick
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 -
Re: Remove default text from Search Box onclick
21 October 2011 at 5:34am
Thanks Gentlemen. Hardcoding it with the placeholder worked.
-
Re: Remove default text from Search Box onclick
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!)
| 2429 Views | ||
|
Page:
1
|
Go to Top |
