Well, there is a way. It works if you clear that value ("Search...") on focus using JavaScript.
Example:
<input type="text" name="[[+searchIndex]]" id="[[+searchIndex]]" value="Search... [[+searchValue]]"></input>
Here is jQuery script I use.
/*
* Cross-browser event handling, by Scott Andrew
*/
function addEvent(element, eventType, lamdaFunction, useCapture) {
if (element.addEventListener) {
element.addEventListener(eventType, lamdaFunction, useCapture);
return true;
} else if (element.attachEvent) {
var r = element.attachEvent('on' + eventType, lamdaFunction);
return r;
} else {
return false;
}
}
/*
* Kills an event's propagation and default action
*/
function knackerEvent(eventObject) {
if (eventObject && eventObject.stopPropagation) {
eventObject.stopPropagation();
}
if (window.event && window.event.cancelBubble ) {
window.event.cancelBubble = true;
}
if (eventObject && eventObject.preventDefault) {
eventObject.preventDefault();
}
if (window.event) {
window.event.returnValue = false;
}
}
/*
* Safari doesn't support canceling events in the standard way, so we must
* hard-code a return of false for it to work.
*/
function cancelEventSafari() {
return false;
}
/*
* Cross-browser style extraction, from the JavaScript & DHTML Cookbook
* <http://www.oreillynet.com/pub/a/javascript/excerpt/JSDHTMLCkbk_chap5/index5.html>
*/
function getElementStyle(elementID, CssStyleProperty) {
var element = document.getElementById(elementID);
if (element.currentStyle) {
return element.currentStyle[toCamelCase(CssStyleProperty)];
} else if (window.getComputedStyle) {
var compStyle = window.getComputedStyle(element, '');
return compStyle.getPropertyValue(CssStyleProperty);
} else {
return '';
}
}
/*
* CamelCases CSS property names. Useful in conjunction with 'getElementStyle()'
* From <http://dhtmlkitchen.com/learn/js/setstyle/index4.jsp>
*/
function toCamelCase(CssProperty) {
var stringArray = CssProperty.toLowerCase().split('-');
if (stringArray.length == 1) {
return stringArray[0];
}
var ret = (CssProperty.indexOf("-") == 0)
? stringArray[0].charAt(0).toUpperCase() + stringArray[0].substring(1)
: stringArray[0];
for (var i = 1; i < stringArray.length; i++) {
var s = stringArray[i];
ret += s.charAt(0).toUpperCase() + s.substring(1);
}
return ret;
}
/*
* Disables all 'test' links, that point to the href '#', by Ross Shannon
*/
function disableTestLinks() {
var pageLinks = document.getElementsByTagName('a');
for (var i=0; i<pageLinks.length; i++) {
if (pageLinks[i].href.match(/[^#]#$/)) {
addEvent(pageLinks[i], 'click', knackerEvent, false);
}
}
}
/*
* Cookie functions
*/
function createCookie(name, value, days) {
var expires = '';
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
var expires = '; expires=' + date.toGMTString();
}
document.cookie = name + '=' + value + expires + '; path=/';
}
function readCookie(name) {
var cookieCrumbs = document.cookie.split(';');
var nameToFind = name + '=';
for (var i = 0; i < cookieCrumbs.length; i++) {
var crumb = cookieCrumbs[i];
while (crumb.charAt(0) == ' ') {
crumb = crumb.substring(1, crumb.length); /* delete spaces */
}
if (crumb.indexOf(nameToFind) == 0) {
return crumb.substring(nameToFind.length, crumb.length);
}
}
return null;
}
function eraseCookie(name) {
createCookie(name, '', -1);
}
/*
* Clear Default Text: functions for clearing and replacing default text in
* <input> elements.
*
* by Ross Shannon, http://www.yourhtmlsource.com/
*/
addEvent(window, 'load', init, false);
function init() {
var formInputs = document.getElementsByTagName('input');
for (var i = 0; i < formInputs.length; i++) {
var theInput = formInputs[i];
if (theInput.type == 'text') {
/* Add event handlers */
addEvent(theInput, 'focus', clearDefaultText, false);
addEvent(theInput, 'blur', replaceDefaultText, false);
/* Save the current value */
if (theInput.value != '') {
theInput.defaultText = theInput.value;
}
}
}
}
function clearDefaultText(e) {
var target = window.event ? window.event.srcElement : e ? e.target : null;
if (!target) return;
if (target.value == target.defaultText) {
target.value = '';
}
}
function replaceDefaultText(e) {
var target = window.event ? window.event.srcElement : e ? e.target : null;
if (!target) return;
if (target.value == '' && target.defaultText) {
target.value = target.defaultText;
}
}
/*
* jQuery autoResize (textarea auto-resizer)
* @copyright James Padolsey http://james.padolsey.com
* @version 1.04
*/
(function(a){a.fn.autoResize=function(j){var b=a.extend({onResize:function(){},animate:true,animateDuration:150,animateCallback:function(){},extraSpace:20,limit:1000},j);this.filter('textarea').each(function(){var c=a(this).css({resize:'none','overflow-y':'hidden'}),k=c.height(),f=(function(){var l=['height','width','lineHeight','textDecoration','letterSpacing'],h={};a.each(l,function(d,e){h[e]=c.css(e)});return c.clone().removeAttr('id').removeAttr('name').css({position:'absolute',top:0,left:-9999}).css(h).attr('tabIndex','-1').insertBefore(c)})(),i=null,g=function(){f.height(0).val(a(this).val()).scrollTop(10000);var d=Math.max(f.scrollTop(),k)+b.extraSpace,e=a(this).add(f);if(i===d){return}i=d;if(d>=b.limit){a(this).css('overflow-y','');return}b.onResize.call(this);b.animate&&c.css('display')==='block'?e.stop().animate({height:d},b.animateDuration,b.animateCallback):e.height(d)};c.unbind('.dynSiz').bind('keyup.dynSiz',g).bind('keydown.dynSiz',g).bind('change.dynSiz',g)});return this}})(jQuery);
/*
* jQuery autoREsize
* function
*/
$(document).ready(function() {
$('textarea').autoResize({
// Quite slow animation:
animateDuration : 500,
// More extra space:
extraSpace : 40
});
});
Get rid of last few lines (check comments) as they auto resize textareas automatically and you might not need it
You can check how it works here:
http://www.probosys.com
Search form is in the footer.