大文字と小文字を区別して結果を絞り込む

Question

キーアップのドロップダウンメニューで利用できるオプションを制限する検索ボックスがあります。大文字と小文字の区別に問題があります。optionに大文字または小文字の文字が入力されていることを確認するためにこの関数を変更するにはどうすればよいですか？

フィドル：https://jsfiddle.net/g2q8hvf4/
結果は 'I' と '私は' あなたはfilter()メソッドを使用して、クエリと現在のテキストの両方を変換することができます

$(document).on('keyup', '#condition-search', function(e) { 
 
    var str = $('#condition option:contains(' + $(this).val() + ')'); 
 
    if (str) { 
 
    $('#condition option').hide(); 
 
    str.show(); 
 
    } else { 
 
    $('#condition option').show(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" class="form-control" id="condition-search"> 
 
<select class="form-control" id="condition" size="15" style="overflow-y: scroll" ;> 
 
     <option class="cat-1">Item1</option> 
 
     <option class="cat-2">item2</option> 
 
     <option class="cat-3">Item3</option> 
 
     <option class="cat-4">item4</option> 
 
     <option class="cat-5">Item5</option> 
 
    </select>

Answer 1

の間で異なる方法をお知らせ

$(document).on('keyup', '#condition-search', function(e) { 
 
    var query = $(this).val().toLowerCase(); 
 
    var str = $('#condition option').filter(function() { 
 
    return $(this).text().toLowerCase().includes(query); 
 
    }); 
 
    if (str) { 
 
    $('#condition option').hide(); 
 
    str.show(); 
 
    } else { 
 
    $('#condition option').show(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" class="form-control" id="condition-search"> 
 
<select class="form-control" id="condition" size="15" style="overflow-y: scroll" ;> 
 
     <option class="cat-1">Item1</option> 
 
     <option class="cat-2">item2</option> 
 
     <option class="cat-3">Item3</option> 
 
     <option class="cat-4">item4</option> 
 
     <option class="cat-5">Item5</option> 
 
    </select>

：比較の前に小文字に

Answer 2

私はあなたの利用可能なリスト項目の小文字バージョンに（ジャバスクリプトのtoLowercase()を使用して）その小文字で入力した文字列を比較すると思います。