使用数据属性进行 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>

Answer 2

您可以使用filter根据data显示和隐藏div

使用.includes可以检查天气 data-find包含值的字符，如果文本框

$(function() {
  $("#search-text").keyup(function() {
    var n = $(this).val(); /* Get the value of the textbox */
    $(".subcat-item").show(); /* Show all .subcat-item */
    $(".item").filter(function() { /* Filter all .item and hide*/
      return !$(this).data('find').includes(n);
    }).parent().hide();
  });
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.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 3

使用一个简单的属性选择器：

$(".item[data-find*='" + n + "']")

将搜索其data-find包含 n 值的.item。