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

Re: Pre filled search text box
 

Can you do this for "product options" selection box as well? Some of our customers don't realize that if they don't choose an option, then x-cart will use the first option. I want the box to read, "Please make a slection" and not be able to process until they do.

Does anyone know the code and where to place them?

Re: Pre filled search text box
 

That may, I would have thought, require a little more involvement including a few templates to edit and digging through the relevant javascript file that it talks to.

1. You would need to create in .tpl a default OPTION, say "Please choose".
2. With the js if the OPTION still remains as "Please choose" prompt with an alert.

There's probably more to it than that. But i haven't got 4.0 code on me :(

Re: Pre filled search text box
 

No need for code. Make the first option ( # zero) a heading like CHOOSE XYZ.. Then don't allow it pass validation. Well that is code, but it gets input as data!

Re: Pre filled search text box
 

Here's another way to do this:

http://forum.x-cart.com/showthread.php?p=189859#post189859

Re: Pre filled search text box
 

Improved it a little bit - say you have enter a search term, click away from the box by accident and click back on it, it will clear the contents. This coding will check to see if anything apart from the default text is in the box, and if the default text is not in the box, will not clear it.

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

Re: Pre filled search text box
 

Thanks carlisle works great,

I was going to post something not to dissimilar to that - but I was worried about filling your page with excess code.