通过键入区分大小写问题缩小结果 [重复]答案

【问题标题】：Narrow results by typing case sensitivity issue [duplicate]通过键入区分大小写问题缩小结果 [重复]
【发布时间】：2017-11-06 15:03:25
【问题描述】：

我有一个搜索框，它限制了 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>

【问题讨论】：

stackoverflow.com/questions/187537/…

标签： javascript jquery

【解决方案1】：

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

【讨论】：

【解决方案2】：

您可以使用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>

【讨论】：