clear search box the first time it's selected

rubyonrails-talk
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

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" /> </form>

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();   }, });

5

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)

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