Adding info text to search box

makar

Hello,

I am looking for a way to add informative text to a search box, i.e. a text that is shown there by default and disappears when cursor is put there.

I have located the following line in template-functions.php:

`" id="search_input" size="10" />`

And I've added the following code to it:

`onfocus="if(this.value=='Start search here') this.value = ''" onblur="if(this.value=='') this.value = 'Start search here'"`

However, this would not show the "Start search here" text when a pages has just loaded, and you have to put cursor in search box for the text to start showing.

Does anyone have any ideas how to further modify the input line, so the "Start search here" text would be show all the time without having to click search box first?

Thank you!

acrylian

You should never modify core files. You may want to look at the searchform function (see documentation for the correct name), that has a parameter to change the button text.

makar

It is text in input rather then the button, that I would like to see. Perhaps I did not explain it well, so for example you can observe it on this site:

http://blog.js-development.com

Where in the input field there is "Search..." text. I took a look at source of this site and it looks like I will need to modify the core, as I cannot see how to implement this with ZP's function printSearchForm.

acrylian

Ok, I missunderstood. I suggest to try using jQuery to modify that. Then you would not need to hack the core.

If you really need to modify the function itself, copy it, rename it and use it as a theme custom function (see the theming tutorial about that) instead of hacking.

makar

Looks like this jQuery plugin should do the trick:

http://plugins.jquery.com/project/default-text

From what I've gathered so far (I am quite new to JS and haven't dealt with jQuery), this example code should work just by including it in the body:

`



$('input').defaultText({ defText: 'Bob' });



`

And of course there is in the head:

`

/js/jquery.defaultText.js">

`

But this did not produce any result for me... Will play with it more tomorrow. And thank you for the suggestion!

fretzl

Put this in the head of your page and see if this is what you want.
It's just a jQuery snippet found on the internet.

`

//

`

makar

Oh yes, that is exactly what I wanted! Plus it's quick and simple.

Thank you very much for sharing the code!

jackdaw

I added the above code of fretzl to my header. It works, but after the first search is done, I'd like to add the text 'Search more...' to the input field, so that visitors know they can specify their search even more. How can I do that?

acrylian

That will most likely be on the search.php itself. You probably need to check for results or empty results to change the text accordingly (that is needed as you technically can access the search page without prior search - depends on your site naturally).

sbillard

The simplest way to do this would be to change the text in the above script to be a PHP statement

Change both instances of `'Start search here'` to `'<?php if ($searchwords) echo 'Search more...'; else echo 'Search starts here'; ?>'`

Of course this presumes that your them has setup the `$searchwords` variable. Not all themes do this.

jackdaw

Thanks! It was even simpler than I thought. Just adjusting those lines in the search.php file was enough.

Tedsds

How can I use the code to populate both the email address field and product search? I've tried it several ways and the text in only 1 field will disappear, while the other stays there.

<link removed by admin>

acrylian

What a really clever spam attempt...:-(