javascript - 使用数据属性的 jQuery 搜索

Question

我正在尝试使用 data-find 属性搜索项目，但我的函数只是将输入字符串与容器内的任何文本进行匹配。

您可以通过向 HTML 添加单词然后输入内容来看到这一点。

如何让我的函数与 data-find 属性中的内容相匹配？

$(document).ready(function() {
  $("#search-text").keyup(function() {
    var n = $("#search-text").val(),
        t = ($(".item").attr("[data-find]"),
             n.replace(/ /g, "'):finditem('"));
    $.extend($.expr[":"], {
      finditem: function(n, t, e, i) {
        return (
          (n.textContent || n.inText || "")
          .toLowerCase()
          .indexOf((e[3] || "").toLowerCase()) >= 0
        );
      }
    }),
      $("#subcat-list div")
      .not(":finditem('" + t + "')")
      .each(function(n) {
      $(this).removeClass("subcat-item");
    }),
      $("#subcat-list div:finditem('" + t + "')").each(function(n) {
      $(this).addClass("subcat-item");
    });
  });
});

#subcat-list {
  display: flex;
}
.subcat-item {
  height: 50px;
  width: 50px;
}
.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search-text" placeholder="search">

<div id="subcat-list">
  <div class="subcat-item" style="background:red">
    <div class="item" data-find="red"></div>
  </div>
  <div class="subcat-item blue" style="background:blue">
    <div class="item" data-find="blue"></div>
  </div>
  <div class="subcat-item green" style="background:green">
    <div class="item" data-find="green"></div>
  </div>
</div>

Answer 1

使用each、toggleClass和includes

$(document).ready(function() {
  $("#search-text").keyup(function() {
    var n = $("#search-text").val().toLowerCase(); //convert value to lowercase for case-insensitive comparison
    $(".item").each( function(){
       var $this = $(this);
       var value = $this.attr( "data-find" ).toLowerCase(); //convert attribute value to lowercase
       $this.parent().toggleClass( "hidden", !value.includes( n ) );
    })
  });
});

演示

$(document).ready(function() {
  $("#search-text").keyup(function() {
    var n = $("#search-text").val();
    $(".item").each( function(){
       var $this = $(this);
       var value = $this.attr( "data-find" ).toLowerCase();
       $this.parent().toggleClass( "hidden", !value.includes( n ) );
    })
  });
});

#subcat-list {
  display: flex;
}
.subcat-item {
  height: 50px;
  width: 50px;
}
.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search-text" placeholder="search">

<div id="subcat-list">
  <div class="subcat-item" style="background:red">
    <div class="item" data-find="red"></div>
  </div>
  <div class="subcat-item blue" style="background:blue">
    <div class="item" data-find="blue"></div>
  </div>
  <div class="subcat-item green" style="background:green">
    <div class="item" data-find="green"></div>
  </div>
</div>