Pre filled search text box
 

Is there somebody how knows how to pre fill the search text box with something lik 'Start searching ...'

And the so that when a visitor clicks in this text i.e. the search text box, it'll dissapear i.e. becomes empty?

At this moment I have {$searchstring|escape:'html'} in it because I use the Smart Search mod.

Any help is appreciated.

Re: Pre filled search text box
 

Add this to the search input box:

value="search for products..."onFocus="this.value=''"

Re: Pre filled search text box
 

thanks balinor but should I then replace the '{$searchstring|escape:'html'}' whta is in it now?

Re: Pre filled search text box
 

If that is set for the value, yes, you can remove that.

Re: Pre filled search text box
 

That works, love ya ;)

You have any idea if this'll work with language variables?

I tried replacing value="search for products..."onFocus="this.value=''"

with $lng.lbl_my_text but that doesn't work :(

Re: Pre filled search text box
 

Use:

value="{$lng.lbl_my_text}" onFocus="this.value=''"

Re: Pre filled search text box
 

You could put the original value back too if the field was left empty... (similar to apple.com's prettysearch)...

value="{$lng.lbl_my_text}" onFocus="this.value='';" onBlur="if(this.value=='') this.value='{$lng.lbl_my_text}';"

The code might be a little bit much, but you never know

Re: Pre filled search text box
 

You guys are the best! Works like a charme :)

But kube, what do you mean with the pretty search example, I noticed Apple's search box, but when you leave it empty, no search is performed. Can you explain what you're after with this code (which I've implemented like you said)?

Re: Pre filled search text box
 

My bad. What happens with apple's search field is obviously a little sophisticated. But for usability, if the field remains empty and you click elsewhere on the page instead of searching, the field returns to a default value (ie. it will return to saying 'Search' if left empty).

onFocus means the item is active
(in this case it will remove value of box) onFocus="this.value='';"

onBlur means the item is not active
(will return a value back into box if it is left empty) onBlur="if(this.value=='') this.value='{$lng.lbl_my_text}';"

Re: Pre filled search text box
 

I agree with kube - apple.com search is very user friendly. A good model to emulate. The search box says, "search" until you click in it (then it is empty, waiting for input). As soon as the search results refresh, the search box again says, "search". As in kube's post #7