jquery autoSearch水印

时间:2009-03-31 17:20:19

标签: jquery watermark

我正在使用jquery插件wordFilter:http://people.apache.org/~gmonroe/wordFilter/index.html,它提供了autoSearch函数,允许根据键入text_field的文本自动过滤元素列表。

效果很好,但如果没有输入文字,我希望在那里也有一个text_field水印。遗憾的是,此文本会导致autoSearch触发。当然,我不希望这样,我希望在用户实际输入之前忽略它。

有没有人有使用带水印的自动搜索类型文本字段的经验?

2 个答案:

答案 0 :(得分:1)

我很容易实现这个效果。我没有立即将autoSearch功能添加到字段中,而是在用户第一次点击该字段后添加。

以下是相关的代码块:

CSS:设置水印颜色

.autoSearch {
    color: #999;
}  

HTML:给文本框指定autoSearch类。我使用searchclass属性 指定搜索框将搜索

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

Javascript:清除该框并在单击时删除autoSearch类。添加自动搜索功能

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

答案 1 :(得分:0)

如果用户选中文本框,则不会触发click事件,因此不会删除水印,而应使用焦点事件。

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