大文字と小文字を区別しないリストフィルタリング

Question

単語を大文字にするかどうかを気にせずにリストをフィルタリングしようとしています。

私は次のようなHTMLがあります。ここでは

<ul class="dropdown-menu gatherDropDown" id="list"> 
    <h3 id="header">Filter by </h3> 
    <input id="filter" type="text" name="fname" onkeyup="filterList(this)"> 
    <li><input type="checkbox" class="item_name"> Producer 1</li> 
    <li><input type="checkbox" class="item_name"> Producer 2</li> 
    <li><input type="checkbox" class="item_name"> Producer 3</li> 
    <li><input type="checkbox" class="item_name"> Producer 4</li> 
    <li><input type="checkbox" class="item_name"> Producer 5</li> 
    <li><input type="checkbox" class="item_name"> Producer 6</li> 
    <li><input type="checkbox" class="item_name"> Producer 7</li> 
</ul> 

は私のjQueryのです：

function filterList(element){ 
    var value = $(element).val(); 

    $("#list > li:not(:contains(" + value + "))").hide(); 
    $("#list > li:contains(" + value + ")").show(); 
} 

私もcodepenを設定している：http://codepen.io/tetonhiker/pen/Nbqrzd

Answer 1

まあ、私は非常にあなたのjsを変更しました少しですが、このようなことについてどうしたらいいですか（説明については、下部を参照してください）：

$("#filter").on("keyup", function() { 
 
\t var value = $(this).val().toLowerCase(); 
 
\t $("#list > li").each(function() { 
 
\t \t $(this).toggle($(this).text().toLowerCase().indexOf(value) !== -1) 
 
\t }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h3 id="header">Filter by </h3> 
 
<input id="filter" type="text" name="fname"> 
 
<ul class="dropdown-menu gatherDropDown" id="list"> 
 
    <li><input type="checkbox" class="item_name">Producer 1</li> 
 
    <li><input type="checkbox" class="item_name">Producer 2</li> 
 
    <li><input type="checkbox" class="item_name">Producer 3</li> 
 
    <li><input type="checkbox" class="item_name">Producer 4</li> 
 
    <li><input type="checkbox" class="item_name">Producer 5</li> 
 
    <li><input type="checkbox" class="item_name">Producer 6</li> 
 
    <li><input type="checkbox" class="item_name">Producer 7</li> 
 
</ul>

説明：私はあなたのリストの各項目をループしてその.text()値はinputボックスの値の一致があるかどうかをチェックしています。大文字と小文字が区別されない理由は、すべてが小文字になるからです。

Answer 2

あなたは常に最初の場所で大文字の文字をしたにも

$.expr[":"].Contains = $.expr.createPseudo(function (arg) { 
      return function (elem) { 
       return $(elem).text().toLowerCase().indexOf(arg.toLowerCase()) >= 0; 
      }; 
     }); 
     function filterList(element) { 
      var value = $(element).val(); 
      $("#list > li:not(:Contains(" + value + "))").hide(); 
      $("#list > li:Contains(" + value + ")").show(); 
     }