Div类搜索使用数据过滤属性

Div Like search Using dat filter Property

本文关键字：数据 过滤 属性 搜索 Div      更新时间：2023-09-26

我试图使用div的数据过滤器属性实现搜索。这里有一个问题。我想实现一个like搜索。目前看起来是完全匹配的。我需要改变的地方，使它成为一个类似的搜索

      <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();
      }
 });
});

请看这里:CSS选择器，这是jQuery的选择器所基于的。

jQuery添加了属性Contains选择器

在你的情况下会像这样工作:

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

也许这行得通:

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();
  }
}
相关文章：