jQueryの - 私はここに、このjQueryのクイックフィルタのコードを見てきた

検索画像title属性：代わりに、リスト項目などの https://github.com/syropian/jQuery-Quick-Filter jQueryの - 私はここに、このjQueryのクイックフィルタのコードを見てきた

私はクイックフィルタにイメージのリストをそれを使用できるようにしたいと思い、デモで使用されています。

デモは、これを使用しています。私はこれを行うしたい

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

を、私は画像のタイトル属性に基づいてフィルタリングできるようにしたいと思います。

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 ... '！ –

要素のTextContent用quickfilter.jsチェックとInnerTextプロパティのみ。画像タイトルを確認するための条件を追加すると、そのジョブが実行されます。私はあなたのケースにセレクタを変更すると動作するはずだと思う

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

$('#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

quickfilter.jsにコード以下のとおりelem.title追加：

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

ない場合は、コメントであなたの試みでフィドルを提供してください以下のセクションをご覧ください。

出典

2017-03-01 12:30:00

jQueryの - 私はここに、このjQueryのクイックフィルタのコードを見てきた

答えて

関連する問題