Question

我一直在看这个jQuery快速过滤器代码： https://github.com/syropian/jQuery-Quick-Filter

我希望能够使用它来快速过滤图像列表，而不是演示中使用的列表项。

演示使用：

<script type="text/javascript">
    $(document).ready(function(){
        $('#txtSearch').quickfilter('#list li');
    });
</script>

...

<input type="text" id="txtSearch" placeholder="Filter" />
<ul id="list">
    <li>Apples</li>
    <li>Oranges</li>
    <li>Pineapples</li>
    <li>Bananas</li>
    <li>Dragonfruit</li>
    <li>Peaches</li>
    <li>Raspberries</li>
    <li>Strawberries</li>
    <li>Blueberries</li>
    <li>Cantaloupe</li>
</ul>

我想这样做：

<script type="text/javascript">
    $(document).ready(function(){
        $('#txtSearch').quickfilter('#list img');
    });
</script>

...

<input type="text" id="txtSearch" placeholder="Filter" />

<div id="list">
    <img src="a.png" width="5" height="5" title="Apples" />
    <img src="a.png" width="5" height="5" title="Oranges" />
    <img src="a.png" width="5" height="5" title="Pineapples" />
    <img src="a.png" width="5" height="5" title="Bananas" />
    <img src="a.png" width="5" height="5" title="Dragonfruit" />
    <img src="a.png" width="5" height="5" title="Peaches" />
    <img src="a.png" width="5" height="5" title="Raspberries" />
    <img src="a.png" width="5" height="5" title="Strawberries" />
    <img src="a.png" width="5" height="5" title="Blueberries" />
    <img src="a.png" width="5" height="5" title="Cantaloupe" />
</div>

就我而言，我希望能够根据图片的标题属性进行过滤。

jQuery Quick Filter代码如下：

(function($){
$.extend($.expr[':'], {missing: function (elem, index, match) {
    return (elem.textContent || elem.innerText || "").toLowerCase().indexOf(match[3]) == -1;
}});
$.extend($.expr[':'], {exists: function(elem, i, match, array){
    return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}});
$.extend($.fn,{
    quickfilter: function(el){
         return this.each(function(){
            var _this = $(this);
            var query = _this.val().toLowerCase();
            _this.keyup(function () {
                query = $(this).val().toLowerCase();
                if(query.replace(/\s/g,"") != ""){
                    $(el+':exists("' + query.toString() + '")').show();
                    $(el+':missing("' + query.toString() + '")').hide();
                }
                else {
                    $(el).show();
                }
            });
        });
    }
});
})(jQuery);

我想知道是否有人可以提供一个指针，告诉我如何修改它以搜索标题属性？

我意识到该函数使用“innerText”，并在<li>列表项之间搜索内部文本。

在这种情况下，由于需要搜索属性，因此略有不同。

Answer 1

quickfilter.js仅检查元素textcontent和innertext。添加条件以检查图像标题将完成这项工作。按照以下代码在quickfilter.js

中添加elem.title

$.extend($.expr[':'], {
    missing: function (elem, index, match) {
        return (elem.textContent || elem.innerText || elem.title || "").toLowerCase().indexOf(match[3]) == -1;
    }
});
$.extend($.expr[':'], {
    exists: function (elem, i, match, array) {
        return (elem.textContent || elem.innerText || elem.title || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
    }
});

Answer 2

这不起作用？

<script type="text/javascript">
    $(document).ready(function(){
        $('#txtSearch').quickfilter('#list img[title="Apples"]');
    });
</script>

Answer 3

替换它：

return (elem.textContent || elem.innerText || "")

用这个：

return (elem.getAttribute('title') || "")

<强>段

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
  <title>00A00</title>

  <style>
    li {
      height: 150px;
      margin: 15px 0;
    }
    
    img {
      transform: translateY(75px)
    }
  </style>
</head>

<body>
  <header>

  </header>
  <section>



    <input type="text" id="txtSearch" placeholder="Filter">

    <ol id="list">

      <li class='slide'><img src='http://placehold.it/150x150/000/fff?text=Apples' title="Apples"></li>
      <li class='slide'><img src='http://placehold.it/150x150/00f/eee?text=Oranges' title="Oranges"></li>
      <li class='slide'><img src='http://placehold.it/150x150/0e0/111?text=Pineapples' title="Pineapples"></li>
      <li class='slide'><img src='http://placehold.it/150x150/f00/fff?text=Bananas' title="Bananas"></li>
      <li class='slide'><img src='http://placehold.it/150x150/fc0/000?text=Dragonfruit' title="Dragonfruit"></li>
      <li class='slide'><img src='http://placehold.it/150x150/fff/000?text=Peaches' title="Peaches"></li>

    </ol>



  </section>
  <footer>

  </footer>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script>
    (function($) {
      $.extend($.expr[':'], {
        missing: function(elem, index, match) {
          return (elem.getAttribute('title') || "").toLowerCase().indexOf(match[3]) == -1;
        }
      });
      $.extend($.expr[':'], {
        exists: function(elem, i, match, array) {
          return (elem.getAttribute('title') || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
        }
      });
      $.extend($.fn, {
        quickfilter: function(el) {
          return this.each(function() {
            var _this = $(this);
            var query = _this.val().toLowerCase();
            _this.keyup(function() {
              query = $(this).val().toLowerCase();
              if (query.replace(/\s/g, "") != "") {
                $(el + ':exists("' + query.toString() + '")').show();
                $(el + ':missing("' + query.toString() + '")').hide();
              } else {
                $(el).show();
              }
            });
          });
        }
      });
    })(jQuery);


    $(document).ready(function() {
      $('#txtSearch').quickfilter('#list img');
    });
  </script>
</body>

</html>

Answer 4

没有快速过滤器

$('#txtSearch').keyup(function (e) {
    var query = $(this).val().toLowerCase();
    $('#list img').each(function (index) {
        if ($(this).attr('title').toLowerCase().indexOf(query) == -1) {
            $(this).hide();
        } else {
            $(this).show();
        }
    });
});

Answer 5

我认为将选择器更改为您的案例应该有效：

$('#txtSearch').quickfilter('#list img');

如果没有，请在下面的评论部分提供您的尝试。

jQuery - 搜索图片标题属性

5 个答案: