javascript - Div Like search 使用 dat filter 属性

Question

我正在尝试使用 div 的 data-filter 属性来实现搜索。这是一个问题。我想实现一个类似的搜索。目前它看起来完全匹配。我需要在哪里进行更改以使其成为一个类似的搜索

      <label for="search">Search Input:</label>
<input type="search" name="filter" id="search" value="" />
<div data-filter="vehicle1">vehicle1</div>
<div data-filter="vehicle2">vehicle2</div>
<div data-filter="vehicle3">vehicle3</div>
<div data-filter="vehicle4">vehicle4</div>
<div data-filter="vehicle5">vehicle5</div>


 $(document).ready(function() {


    $('#search').on('keyup', function() {
             var val = $.trim(this.value);

            if (val) {
               $('div[data-filter]').hide();
       $('div[data-filter=' + val + ']').show();

              }
 if(val.length == 0)
      {
    $('div[data-filter]').show();
      }
 });

});

Answer 1

看看这里：CSS 选择器，这是 jQuery 选择器的基础。

jQuery 使用Attribute Contains Selector添加到其中

在你的情况下，它会像这样工作：

$('div[data-filter*="' + val + '"]').show();

Answer 2

也许这会起作用：

var $divs=$("div");
for(var i=0;i<$divs.length;i++){
  console.log("div's data-filter",$divs[i]["data-filter"]);
  console.log("value",val);
  if($divs[i]["data-filter"]
    &&($divs[i]["data-filter"].indexOf(val)!==-1)){
      $($divs[i]).show();
  }
}