Clear search box the first time it's selected

Rails
1

Hi - I’m trying to implement a search box that has a pre-filled
message “enter search text.” The first time it’s selected, I’d like
it to clear out, but after that, I’d like it to remain. I imagine
lots of people have done this, any ideas how to accomplish this?

Thanks,
Dino

2

Not sure exactly what you mean by “The first time it’s selected, I’d
like
it to clear out, but after that, I’d like it to remain”, but I do much
the same functionality with this line:

<%= text_field ‘model_name’, ‘column_name’, :value => “Enter search
text…”, :onclick => ‘if (this.value==“Enter search text…”)
{this.value=""; }’ %>

This clears it out. You could also do something on lost of focus and
set the value to Enter search text… if it’s blank.

3

You can use value=‘your pre filled message’ in your search input to
set a pre-fillled message.

Then you can use onfocus and onblur (javascript) to clear our and re-
fill your search box

Aurélien Bottazini
http://www.mycashgarden.com

4

sorry, I left out a couple of details. in body onload, I have to loop
thru the search form and put the hint value in the text box. Add this
to Event.addBehavior above

‘body’: function() {
$$(‘form.searchform’).each( function( frm) {
if (empty(frm.q)) { frm.q.value = frm.hint.value;
frm.q.style.color="#444";}
});
},

Also, in my view, add any existing query param in the search text
(optional)

5

that’s pretty much what I did. I have several search forms that I
want to have the functionality you’re looking for. I give the search
forms a class “searchform”. The search text is always named “q” and I
have a hidden field called hint to customize the hint text. I am
using lowpro (google it) to separate the code from my view.

In view:

is js:

function notempty(fld) {
return fld.value!=null && fld.value.match(/\S/)!=null;
}

Event.addBehavior({
‘.searchform:submit’: function() {
// is query text not empty and not the hint text?
if (notempty(this.q) && this.q.value!=this.hint.value) {
elems = this.elements;
// remove the hint and empty fields so they don’t show in the
query string (optional)
for( i=elems.length-1;i>=0;i–)
if (elems[i].value=="" || elems[i].name==‘hint’)
elems[i].remove();
return true;
}
// you may want to display an alert instead of just returning false
return false;
},

‘input.search:blur’: function() {
if (notempty(this)) return;
this.style.color=’#444’;
this.value=this.form.hint.value;
},

‘input.search:focus’: function() {
this.style.color=’#000’;
if (this.value == this.form.hint.value) this.value=’’; else
this.select();
},
});