Portal Engine
Version 2.x > Portal Engine > Search Box - Web Part - Default Text View modes: 
User avatar
Member
Member
Mark - 1/11/2008 12:19:32 PM
   
Search Box - Web Part - Default Text
Hi

How do I set the default text of the search control text box. I have a design where the word "search" is already in the textbox instead of using a label?

Thanks, Mark

User avatar
Member
Member
Mufasa - 1/24/2008 12:37:36 AM
   
RE:Search Box - Web Part - Default Text
I just had the exact same issue. There are no fields in the default search control to enable this. I just created some Javascript to insert/hide the default text.

Add the following script anywhere in your page. I just have it run at window.load--didn't bother with running exactly after the search textbox is parsed for DOM usage, but I didn't care since it's just unobtrusive help text.

Set the DTF.search.mainSearchTextboxClass to the CSS class that is set in the search control for the text box. Also, set the DTF.search.innerSearchHelpText to whatever text you want shown.

This code requires the ASP.NET AJAX library helper method of $addHandler. Feel free to replace that with your preferred add handler method.

var DTF = {
getElementsByClass: function(searchClass, node, tag) {
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\\\\s)"+searchClass+"(\\\\s|$)");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els.className) ) {
classElements[j] = els;
j++;
}
}
return classElements;
},

search: {
innerSearchHelpText: 'SEARCH',
mainSearchTextboxClass: 'MainSearchTextbox',

init: function (e){
// set initial value
var elem = DTF.search.getSearchTextElement();
if (typeof(elem) !== 'undefined' && typeof(elem.value) !== 'undefined')
{
//if (window.console) window.console.debug('Found the main search text box with class name "' + DTF.search.mainSearchTextboxClass + '".', elem);

if (elem.value == '')
elem.value = DTF.search.innerSearchHelpText;

// setup handlers
$addHandler(elem, 'click', DTF.search.focus);
$addHandler(elem, 'focus', DTF.search.focus);
$addHandler(elem, 'blur', DTF.search.blur);
} else if (window.console) {
window.console.error('Could not find the main search text box with class name "' + DTF.search.mainSearchTextboxClass + '".', elem);
}
},

focus: function (e){
var elem = DTF.search.getSearchTextElement();
if (typeof(elem) !== 'undefined' && typeof(elem.value) !== 'undefined' && elem.value == DTF.search.innerSearchHelpText)
elem.value = '';
},

blur: function (e){
var elem = DTF.search.getSearchTextElement();
if (typeof(elem) !== 'undefined' && typeof(elem.value) !== 'undefined' && elem.value == '')
elem.value = DTF.search.innerSearchHelpText;
},

getSearchTextElement: function() {
var elem = null;
var possibleElems = DTF.getElementsByClass(DTF.search.mainSearchTextboxClass);
if (possibleElems && possibleElems.length == 1)
{
elem = possibleElems[0];
}
return elem;
}
}
};
$addHandler(window, 'load', DTF.search.init);

if(typeof(Sys)!=='undefined')Sys.Application.notifyScriptLoaded();

User avatar
Member
Member
Mark P - 1/24/2008 9:32:58 AM
   
RE:Search Box - Web Part - Default Text
Thanks for the helpful code. I have an alternate solution which I have used where I just alter the code of the web part and set the text property of the input box.

Probably doesn't do as much as yours does but solves my problem for the moment.

Mark