jQuery的 - 搜索影像title属性

我一直在寻找这样的jQuery快速过滤代码在这里：不是列表项为 https://github.com/syropian/jQuery-Quick-Filter jQuery的 - 搜索影像title属性

我希望能够用它来快速过滤图像的列表，在演示中使用。

演示使用此：

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

我想做到这一点：

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

在我的情况，我想基于图像的title属性能够过滤。

jQuery的快速过滤器的代码是这样的：

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

我不知道是否有人也许能够提供一个关于如何修改它的标题搜索属性，请指针？

我意识到该函数使用“innerText”，并搜索<li>列表项之间的内部文本。

在这种情况下，它需要搜索属性稍有不同。

来源

2017-03-01 4532066

'Quick-Filter'正在寻找文本内容。它不是那么大，只是阅读代码并创建它的副本，而不是在标题上工作！ –

在'Quick-Filter'代码中将此行更改为'return（elem.textContent || elem.innerText ||''）.toLow ...'：return（elem.getAttribute（'title'）||' “）.toLow ...'！ –

的quickfilter.js检查元件的TextContent和的innerText只。添加条件来检查图像标题将完成这项工作。按照加入elem.title下面的代码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; 
    } 
});

来源

2017-03-01 12:28:57 Aundy

这是一个很好的解决方案，它保持了原有的功能和更新的功能。 – zer00ne

这不工作？

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

来源

2017-03-01 11:16:12 tealcake

没有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(); 
     } 
    }); 
});

来源

2017-03-01 11:32:47

替换此：

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

与此：

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>

来源

2017-03-01 11:33:21 zer00ne

我想改变选择，以你的情况应该工作：

$('#txtSearch').quickfilter('#list img');

如果没有，请提供拨弄你的评论尝试下面的部分。

来源

2017-03-01 12:30:00

jQuery的 - 搜索影像title属性

回答

相关问题