通过键入大小写敏感性问题缩小结果

Question

我有一个搜索框，限制选项在下拉菜单上的钥匙。我遇到了区分大小写的问题--如何修改这个函数以确保我的option包含键入字符的大写或小写版本？

小提琴：https://jsfiddle.net/g2q8hvf4/

注意“i”和“i”之间的结果是如何不同的

​

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

在进行比较之前，您可以使用filter()方法并将查询和当前文本转换为小写：

​

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

我会将其小写版本(使用javascript的toLowercase() )中输入的字符串与可用列表项的小写版本进行比较。