jQuery quick filter issue with searching span title attribute

Question

I am working on the jQuery Quick Filter ( https://github.com/syropian/jQuery-Quick-Filter ) and am having trouble getting the filter to filter using the span title attributes.

I changed the github code to allow it to also search by the title attribute by adding in the elem.title parts to the code.

This snippet demonstrates the issue:

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

The issue being that sometimes I can filter on the title attributes, but other times I can only filter on the content between the span tags rather than the title attribute of the span element.

1. For the first item, for the banana, I can paste in the 🍌 emoji and it filters on that, but will not filter on the word banana even though that appears in the title attribute.
2. For the second item, I can search by either testing or the 🥝 emoji, but I cannot filter on the word kiwi or fruit even though they appear in the title attribute.
3. For the third item, I can filter on the word carrot (which is between the span tags), but not on the word carrots which appears in the title attributes.
4. For the fourth item, I now can search on the title attributes, so can type bacon and it works...

5. For the fifth item - because there is now text in between the span tags, I cannot search on the title attributes, but can search on the text between the span tags.

   I wondered how I can get this to work, so the filter checks the content of the title attribute - but also the content between the span tags?

Answer 1

I was able to get it to work by combining all of the strings into one and using indexOf against the entire string instead of using || (or) in both missing and existing .

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