jquery自动搜索水印

发布于 2024-07-16 13:55:20 字数 378 浏览 7 评论 0原文

我正在使用 jquery 插件 wordFilter: http://people.apache.org/ ~gmonroe/wordFilter/index.html 提供了 autoSearch 功能，该功能允许根据输入到 text_field 的文本自动过滤元素列表。

它工作得很好，但我希望如果没有输入文本，那里也有一个 text_field 水印。不幸的是，此文本会导致自动搜索触发。当然，我不希望这样，我希望在用户实际键入之前忽略它。

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

掀纱窥君容 2024-07-23 13:55:20

我很容易就达到了这个效果。我没有立即将自动搜索功能添加到字段中，而是在用户第一次单击该字段后添加。

以下是相关的代码块：

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')); 
    });

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')); 
    });

回复收藏 0 原文

千里故人稀 2024-07-23 13:55:20

如果用户切换到文本框，则不会触发 click 事件，因此水印不会被删除，相反，您应该使用 focus 事件。

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

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')); 
    });

回复收藏 0 原文

~没有更多了~