検索ボックスでリストを検索しようとしています。これは私のHTMLです:
<input type="text" id="query" value=""/>
<ol id="abbreviations" >
<li>Cars</li>
<li>bars</li>
.
.
<ol>
そして、これは私が持っているjQueryコードです:
<script>
var abbrs = {};
$('ol#abbreviations li').each(function(i){
abbrs[this.firstChild.nodeValue] = i;
});
$('#query').focus().keyup(function(e){
if(this.value.length >= 2){
$('ol#abbreviations li').hide();
var filterBy = this.value;
for (var abbr in abbrs) {
if (abbr.indexOf(filterBy) !== -1) {
var li = abbrs[abbr];
$('ol#abbreviations li:eq('+li+')').show();
}
}
} else {
$('ol#abbreviations li').show();
}
if(e.keyCode == 13) {
$(this).val('');
$('ol#abbreviations li').show();
}
});
</script>
私のコードは完全に機能していますが、大文字と小文字が区別されます。たとえば、「車」と入力するとリストがフィルタリングされますが、「車」と入力しても機能しません。では、どうすればこの jQuery 検索を非依存にできますか? を変更しようとしましvar filterBy = this.value.toLowerCase();
たが、大文字と一致しません。どうすればそれを機能させることができますか?