jQuery - Search image title attribute

前端未结

关注

 5  2016

天涯浪人

I have been looking at this jQuery quick filter code here: https://github.com/syropian/jQuery-Quick-Filter

I\'d like to be able to use it to quick filter a list of image

相关标签:

5条回答

一整个雨季

2021-01-24 02:13

without quickfilter

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

0 讨论(0)

鱼传尺愫

2021-01-24 02:19
I think changing the selector to your case should work:
```
$('#txtSearch').quickfilter('#list img');
```
If not, please provide a Fiddle with your try in the comment section below.
0 讨论(0)
发布评论:

提交评论
- 加载中...

梦如初夏

2021-01-24 02:21

this is not working ?

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

0 讨论(0)

谎友^

2021-01-24 02:31

Replace this:

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

with this:

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

SNIPPET

<!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>

0 讨论(0)

暗喜

2021-01-24 02:32

The quickfilter.js checks for elements textcontent and innertext only. Adding a condition to check for image title will do the job. Add elem.title as per below code in quickfilter.js

$.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;
    }
});

0 讨论(0)