javascript - jQuery 快速过滤问题与搜索范围标题属性

Question

我正在开发 jQuery 快速过滤器 ( https://github.com/syropian/jQuery-Quick-Filter )，但在使用 span 标题属性进行过滤时遇到问题。

我更改了 github 代码，通过添加 elem.title 来允许它也按标题属性进行搜索部分代码。

此代码片段演示了该问题:

/*
 * Plugin Name: QuickFilter
 * Author: Collin Henderson (collin@syropia.net)
 * Version: 1.0
 * © 2012, http://syropia.net
 * You are welcome to freely use and modify this script in your personal and commercial products. Please don't sell it or release it as your own work. Thanks!
 * https://github.com/syropian/jQuery-Quick-Filter
 * https://stackoverflow.com/questions/42530073/jquery-search-image-title-attribute
 */
(function($) {
  $.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;
    }
  });
  $.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 li');
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<input type="text" id="txtSearch" placeholder="filter" class="form-control" />

<ul id="list" class="list-group list-group-flush">
	<li class="list-group-item" title="banana 1f34c - 🍌">🍌</li>
	<li class="list-group-item" title="kiwi fruit 1f95d - 🥝">testing 🥝</li>
	<li class="list-group-item" title="carrots 1f955 - 🥕"><img src="https://cdn.jsdelivr.net/emojione/assets/svg/1f955.svg" style="width:30px; height:30px"> carrot</li>
	<li class="list-group-item" title="bacon 1f953 🥓"><img src="https://cdn.jsdelivr.net/emojione/assets/svg/1f953.svg" style="width:30px; height:30px"></li>
	<li class="list-group-item" title="cucumber 1f952 🥒"><img src="https://cdn.jsdelivr.net/emojione/assets/svg/1f952.svg" style="width:30px; height:30px"> now I can't filter on title attribute but I can search on text between span tags</li>
</ul>

问题是有时我可以过滤 title 属性，但其他时候我只能过滤 span 标签之间的内容，而不是 span 元素的 title 属性。

1. 对于第一个项目，对于香蕉，我可以粘贴 🍌 表情符号，它会对其进行过滤，但不会过滤单词 banana即使它出现在标题属性中。
2. 对于第二项，我可以通过 testing 进行搜索或 🥝 表情符号，但我无法过滤单词 kiwi或fruit即使它们出现在标题属性中。
3. 对于第三项，我可以过滤单词 carrot (位于 span 标签之间)，但不在单词 carrots 上它出现在标题属性中。
4. 对于第四个项目，我现在可以搜索标题属性，因此可以输入 bacon 并且可以正常工作...

5. 对于第五项 - 因为现在 span 标记之间有文本，所以我无法搜索标题属性，但可以搜索 span 标记之间的文本。

   我想知道如何让它发挥作用，以便过滤器检查 title 属性的内容 - 还检查 span 标记之间的内容？

Answer 1

我能够通过将所有字符串合并为一个并对整个字符串使用indexOf而不是使用||来使其工作。 (或)缺失和现有。

/*
 * Plugin Name: QuickFilter
 * Author: Collin Henderson (collin@syropia.net)
 * Version: 1.0
 * © 2012, http://syropia.net
 * You are welcome to freely use and modify this script in your personal and commercial products. Please don't sell it or release it as your own work. Thanks!
 * https://github.com/syropian/jQuery-Quick-Filter
 * https://stackoverflow.com/questions/42530073/jquery-search-image-title-attribute
 */
(function($) {
  $.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;
    }
  });
  $.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 li');
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<input type="text" id="txtSearch" placeholder="filter" class="form-control" />

<ul id="list" class="list-group list-group-flush">
	<li class="list-group-item" title="banana 1f34c - 🍌">🍌</li>
	<li class="list-group-item" title="kiwi fruit 1f95d - 🥝">testing 🥝</li>
	<li class="list-group-item" title="carrots 1f955 - 🥕"><img src="https://cdn.jsdelivr.net/emojione/assets/svg/1f955.svg" style="width:30px; height:30px"> carrot</li>
	<li class="list-group-item" title="bacon 1f953 🥓"><img src="https://cdn.jsdelivr.net/emojione/assets/svg/1f953.svg" style="width:30px; height:30px"></li>
	<li class="list-group-item" title="cucumber 1f952 🥒"><img src="https://cdn.jsdelivr.net/emojione/assets/svg/1f952.svg" style="width:30px; height:30px"> now I can't filter on title attribute but I can search on text between span tags</li>
</ul>