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?
Solution
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')); });
OTHER TIPS
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'));
});