Search form default value

[nikola]

How can I add default value to search form input field, for instance: value="Enter your search term" when using:

<?php echo htmlentities($input->whitelist('term'), ENT_QUOTES, 'UTF-8'); ?>

that "occupies" input field value.

That default value ("Enter your search term") would have to be excluded from the search.

The behaveiour I'm looking for is similar to search field in PW admin that has value "Search"...

[DaveP]

There are a few options, including

Javascript

<form action="SCRIPT-NAME" method="post">
<input type="text" value="Search..." name="search"
onfocus="if (this.value == 'Search...') {this.value = '';}"
onblur="if (this.value == '') {this.value = 'Search...';}" />
</form>

and in HTML5

<input type="text" name="search" placeholder="Search..."  />

which works in most up to date browsers (but I think not IE9, although I haven't checked recently).

[yellowled]

which works in most up to date browsers (but I think not IE9, although I haven't checked recently).

There are polyfills for the HTML5 placeholder attribute (i.e. pieces of usually javascript to replicate a certain feature in browsers who do not provide it natively). The Modernizr wiki on GitHub has a pretty comprehensive list of them.

Personally, I think placeholder doesn't need to be polyfilled, it's fine to not have it in older browsers. If that's not feasible, the polyfill by Mathias Bynens works pretty good.

[nikola]

Thank you both, I ended up with a small bit of jQuery:

$('input[name=search]').attr({value: 'Search'});

[yellowled]

That will probably perform a search with the search term "Search" if somebody submits the search form without having entered actual search terms. This is not always desirable, and it does not happen if you use the placeholder attribute. (Just sayin'.)

[DaveP]

And you could do the same without jQuery just by adding

value="Search"

to the <input> declaration. (Just sayin'.)

[nikola]

I ended up using this script: http://webcloud.se/code/jQuery-Placeholder and it does exactly what I needed.

[AnotherAndrew]

I have tried all of these suggestions and it doesn't work....Unhappy.

[nikola]

If you use search form from default PW template, you could do the following with the above script mentioned.

<input type='text' name='q' id='search_query' value='<?php echo htmlentities($input->whitelist('q'), ENT_QUOTES, 'UTF-8'); ?>' />

Add HTML5 placeholder to input field like this:

<input type='text' name='q' id='search_query' placeholder='Search' value='<?php echo htmlentities($input->whitelist('q'), ENT_QUOTES, 'UTF-8'); ?>' />

Include the script above to your head section and trigger it like this (also in the head):

<script>
$(document).ready(function() {
$('input[name="q"]').placeholder();
});
</script>

[AnotherAndrew]

Thanks Nikola. Turns out that I was not calling the correct character set in my meta tag. And all of the suggested methods above work now.

[yellowled]

I ended up using this script: http://webcloud.se/c...ery-Placeholder and it does exactly what I needed.

I have never used that particular one, but just from experience: placeholder polyfills can behave erratically in some form environments. Some of them use relative/absolute positioning to overlay the input element with a span which can have various side effects depending on the rest of the CSS. So always make sure you test this properly, it can come back and bite you.

As always, all this depends on which browsers you have to/want to support. Then again, if you don't have to support old IE, polyfills are usually not necessary in the first place.