jQuery - Search image title attribute

2020-04-21 07:10发布

站内问答 / JavaScript
727 5 4

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 images, instead of list items as used in the demo.

The demo uses this:

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

I'd like to do this:

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

In my case, I'd like to be able to filter based on the image's title attribute.

The jQuery Quick Filter code is this:

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

I wonder if anyone might be able to provide a pointer about how I can modify it to search on the title attributes please?

I realise the function uses "innerText", and searches on the inner text between the <li> list items.

In this case, it's slightly different as it needs to search the attribute.

5条回答
倾城　Initia
2楼-- · 2020-04-21 07:52

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) 举报
We Are One
3楼-- · 2020-04-21 07:57

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) 举报
\"骚年 ilove
4楼-- · 2020-04-21 07:58

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) 举报
兄弟一词,经得起流年.
5楼-- · 2020-04-21 08:05

this is not working ?

<script type="text/javascript">
    $(document).ready(function(){
        $('#txtSearch').quickfilter('#list img[title="Apples"]');
    });
</script>
查看更多
0人赞 添加讨论(0) 举报
家丑人穷心不美
6楼-- · 2020-04-21 08:15

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) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)