Question

我正在使用jQuery快速过滤器（https://github.com/syropian/jQuery-Quick-Filter），但无法使过滤器使用跨度标题属性进行过滤。

我更改了github代码，使其也可以通过在代码中添加elem.title部分来按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属性。

对于第一个项目，对于香蕉，我可以粘贴在表情符号中，并对其进行过滤，但是即使出现在title属性中，也不会过滤单词banana。
对于第二项，我可以按testing或表情符号进行搜索，但是即使出现在title属性中，也无法过滤单词kiwi或fruit。< / li>
对于第三项，我可以过滤单词carrot（在span标签之间），但不能过滤标题属性中出现的单词carrots。
对于第四项，我现在可以搜索title属性，因此可以键入腊肉，并且可以使用...
对于第五项-因为span标签之间现在有文本，所以我无法搜索title属性，但可以搜索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>

搜索跨度标题属性时的jQuery快速过滤器问题

1 个答案: