在Jquery中搜索每个具有data属性的对象

Rohit Kishore 发表于 Dev

罗希特·基肖尔（Rohit Kishore）

我正在尝试使用每个功能在列表中进行搜索。我正在使用数据属性进行搜索。这是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则应搜索数据标签；如果输入name，则应搜索数据搜索字词。我尝试使用这个：

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

但这是行不通的。

您需要同时检查data-search-term和data-tag属性，请尝试此操作。

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

filter('[data-search-term*="searchTerm"], [data-tag*="searchTerm"]')
检查两个属性中是否都存在搜索字符串

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

我使用了toggle函数来摆脱if，添加了一个overlay 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);
    }
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="tag_p" data-search-term="name" data-tag="apple, mango, orange, grapes">Name1</div>
<div class="tag_p" data-search-term="name2" data-tag="kerala, goa, delhi">Name2</div>
<div class="tag_p" data-search-term="name3" data-tag="who, what, where">Name3</div>
<div class="tag_p" data-search-term="name4" data-tag="water, oil">Name4</div>
<div class="tag_p" data-search-term="name5" data-tag="english, hindi">Name5</div>
<input type="text" id="search" value="">

演示

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。