# Clear search box the first time it's selected

**URL:** <https://www.ruby-forum.com/t/clear-search-box-the-first-time-its-selected/140795>\
**Category:** Rails\
**Created:** [June 18, 2008, 4:54pm UTC](https://www.ruby-forum.com/t/clear-search-box-the-first-time-its-selected/140795 "2008-06-18T16:54:50Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![dino\_d](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/d/b5ac83/32.png) [@dino\_d](https://www.ruby-forum.com/u/dino_d)\
**Post date:** [June 18, 2008, 4:54pm UTC](https://www.ruby-forum.com/t/clear-search-box-the-first-time-its-selected/140795/1 "2008-06-18T16:54:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dino\_d](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/d/b5ac83/32.png) [@dino\_d](https://www.ruby-forum.com/u/dino_d)\
**Post date:** [June 18, 2008, 5:03pm UTC](https://www.ruby-forum.com/t/clear-search-box-the-first-time-its-selected/140795/2 "2008-06-18T17:03:45Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![dino\_d](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/d/b5ac83/32.png) [@dino\_d](https://www.ruby-forum.com/u/dino_d)\
**Post date:** [June 18, 2008, 5:33pm UTC](https://www.ruby-forum.com/t/clear-search-box-the-first-time-its-selected/140795/3 "2008-06-18T17:33:07Z")

</div>

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](http://www.mycashgarden.com)

---

<div class="post-metadata">

**Author:** ![dino\_d](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/d/b5ac83/32.png) [@dino\_d](https://www.ruby-forum.com/u/dino_d)\
**Post date:** [June 18, 2008, 5:54pm UTC](https://www.ruby-forum.com/t/clear-search-box-the-first-time-its-selected/140795/4 "2008-06-18T17:54:18Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![dino\_d](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/d/b5ac83/32.png) [@dino\_d](https://www.ruby-forum.com/u/dino_d)\
**Post date:** [June 18, 2008, 5:36pm UTC](https://www.ruby-forum.com/t/clear-search-box-the-first-time-its-selected/140795/5 "2008-06-18T17:36:40Z")

</div>

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