0

我尝试通过使用 jQuery 和 attr 选择器来执行搜索过滤器功能，例如...

$('p[data-keywords~="'+keywords+'"]')
$('p[data-keywords*="'+keywords+'"]')

我的完整代码：

function search(keywords) {
    $('p').removeClass('match');

    $('p[data-keywords~="'+keywords+'"]').addClass('match');
    $('p[data-keywords*="'+keywords+'"]').addClass('match');
}


var search_timer;
$("#search").keyup(function() {
    var keywords = $(this).val();
    clearTimeout(search_timer);
    search_timer=setTimeout(function(){
        search(keywords);
    },1000);
});

这看起来不错

但是当数据是data-keywords="one two three"..

当我one three搜索时，它没有找到

游乐场：http: //jsfiddle.net/l2aelba/dpjky/

任何想法 ？或者更好的主意请告诉我

PS：关键字与另一个随机关键字 likeone xxx不会被找到

4

2 回答 2

1

您的查询搜索完全匹配，即“一二三”中不存在“一三”。

jQuery 有一个漂亮的多属性语法，你可以使用：
Multiple Attribute Selector [name="value"][name2="value2"]

所以首先在空格上拆分字符串，然后创建一个像这样的选择器：

$('p[data-keywords~="one"][data-keywords~="three"]').addClass('match');
于 2013-06-05T13:08:21.683 回答
1

尝试按空格分割您的关键字：

function search(keywords) {
    $('p').removeClass('match');

    var keywords = keywords.split(' ');
    for (var i = 0, l = keywords.length; i < l; i++) {
         $('p[data-keywords*="'+keywords[i]+'"]').addClass('match');
    }
}

演示

于 2013-06-05T13:08:21.927 回答