jquery autoSearch watermark

Question

I'm using the jquery plugin wordFilter: http://people.apache.org/~gmonroe/wordFilter/index.html which gives the autoSearch function, which allows for automatically filtering a list of elements based on text typed into a text_field.

It works great, but I was hoping to also have a text_field watermark in there if there is no text entered. this text unfortunately causes the autoSearch to trigger. Of course, I don't want this, I want it to be ignored until the user actually types.

Does anyone have experience using an autoSearch type text field with watermarking?

Answer 1

I achieved this effect pretty easily. Instead of immediately adding the autoSearch feature to a field, I added after the first time a user clicked on the field.

Here are the relevant chunks of code:

CSS: set a watermark color

.autoSearch {
    color: #999;
}  

HTML: give the textbox the autoSearch class. I use a searchclass attribute to specify the search box will search over

<input type="text" class="field autoSearch" searchclass="assign-filter" id="assign-search"/>

Javascript: clear the box and remove the autoSearch class when you click. Add the autosearch functionality

$('.autoSearch').click(function() {
        $(this).val('');
        $(this).removeClass('autoSearch');
        $(this).autoSearch('.'+$(this).attr('searchclass')); 
    });

Answer 2

the click event will not fire if the user tabs to the textbox and so the watermark will not be removed, Instead you should use the focus event.

$('.autoSearch').focus(function() {
        $(this).val('');
        $(this).removeClass('autoSearch');
        $(this).autoSearch('.'+$(this).attr('searchclass')); 
    });