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

Question

I am trying to search in a list with using each function. I am searching using data attribute. Here is the html:

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

There are several divs like this. I am using this jquery function to search through the div using data-search-term.

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

It is working well, but I need to search through data tag attribute. For eg. if I type in orange it should search in data tag & if I enter name it should search data-search term. I tried using this :

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

But it does not work.

Answer 1

You can use the following selector to select all tags that have class "tag_p" and the "data-search-term" attribute is equal to your provided value:

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

And then apply show() function to show the selected elements. So the complete function may be like this:

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

Answer 2

You need to check both data-search-term and data-tag attributes, try this.

1. Check if search string present in either of the two attributes

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

2. Check if search string present in both the two attributes

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

I used toggle function to get rid of the if , added an overlapping if , so that our conditions are evaluated only necessary.

 $('#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=""> 

DEMO