clear search box the first time it's selected

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?


Not sure exactly what you mean by "The first time it's selected, I'd
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.

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_

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:

<form class="searchform" .... >
<input name="q" type="text" class="search" ... />
<input type="hidden" name="hint" value="Enter product name or # to
search" />

is js:

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

  '.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')
      return true;
   // you may want to display an alert instead of just returning false
    return false;

  '': function() {
    if (notempty(this)) return;'#444';

  '': function() {'#000';
    if (this.value == this.form.hint.value) this.value=''; else;

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;"#444";}

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

<input type="text" name="q" value="params[:q]" />