jQuery search using data attributes

Question

I'm trying to search for items using the data-find attribute but my function is just matching the input string with any text inside of the container.

You can see this by adding words to the HTML and then entering the input.

How do I get my function to match what's in the data-find attribute?

$(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

Use each, toggleClass and 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 ) );
    })
  });
});

Demo

$(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>