Question

我有一个搜索框，可以限制keyup下拉菜单中的可用选项。我遇到了区分大小写的问题 - 如何修改此函数以确保我的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()）与可用列表项的小写版本进行比较。

通过输入区分大小写的问题缩小结果

2 个答案: