Question

我正在尝试使用每个功能搜索列表。我正在使用数据属性进行搜索。这是html：

<div class="tag_p" data-search-term="name" data-tag="apple, mango, orange, grapes"></div>

有几个像这样的div。我正在使用此jquery函数使用data-search-term搜索div。

$('.tag_p').each(function(){
    if ($(this).filter('[data-search-term *= ' + searchTerm + ']').length > 0 || searchTerm.length < 1)  {
        $(this).show();
    } else {
        $(this).hide();
    }
});

它运行良好，但我需要搜索数据标记属性。例如。如果我输入orange，则应搜索数据标记＆amp;如果我输入name，则应搜索数据搜索字词。我试过用这个：

if (($(this).filter('[data-search-term *= ' + searchTerm + ']').length > 0 || searchTerm.length < 1)
    || ($(this).filter('[data-tag *= ' + searchTerm+ ']').length > 0 || searchTerm.length < 1)) {
    // ...
}

但它不起作用。

Answer 1

您可以使用以下选择器选择所有具有类＆＃34; tag_p＆＃34;的标签。以及＆＃34;数据搜索术语＆＃34;属性等于您提供的值：

$('.tag_p[data-search-term=' + searchTerm + ']');

然后应用show（）函数来显示所选元素。所以完整的功能可能是这样的：

function (searchTerm) {
  $('.tag_p[data-search-term=' + searchTerm + ']').show();
}

Answer 2

您需要检查-u和data-search-term属性，试试这个。

检查搜索字符串是否存在于两个属性中的任何一个

data-tag
检查两个属性中是否存在搜索字符串

filter('[data-search-term*="searchTerm"], [data-tag*="searchTerm"]')

我使用切换功能来摆脱filter('[data-search-term*="searchTerm"][data-tag*="searchTerm"]')，添加了重叠的if，因此我们的条件只需要进行评估。

if

$('#search').on('input', function() {
  var searchTerm = $.trim(this.value);
  $('.tag_p').each(function() {
    if (searchTerm.length < 1) {
      $(this).show();
    } else {
      $(this).toggle($(this).filter('[data-search-term*="' + searchTerm + '"], [data-tag*="' + searchTerm + '"]').length > 0);
    }
  });
})

DEMO

在Jquery中搜索每个数据属性

2 个答案: