使搜索不区分大小写

Question

下面的 JSFiddle link 我有一个国家选择过滤器的项目。

在搜索栏中，您可以在过滤器中填写您想要的国家/地区。但是，它仅在您使用小写字母时才有效。我试图编辑我的 css 以将文本转换为小写，但无论何时使用大写字母，它仍然不起作用。所以我认为我必须调整脚本。

但是我不知道如何让这个脚本不区分大小写。你能帮我吗？ https://jsfiddle.net/Sentah/d8so22xj/

$("#countryName").focus(function()
    {
        if ($(this).val() === $(this)[0].title)
        {
            $(this).removeClass("default_text_active");
            $(this).val("");
        }
    });

    $("#countryName").blur(function()
    {
        if ($(this).val() === "")
        {
            $(this).addClass("default_text_active");
            $(this).val($(this)[0].title);
        }
    });

    $("#countryName").blur(); 


    $('#countryName').on('keyup', function() {
        var query = this.value;
        $('[id^="chk_country"]').each(function(i, elem) {
              if (elem.value.indexOf(query) != -1) {
                  elem.style.display = 'inline';
                  $("#lbl_for_" + elem.getAttribute("id")).removeClass("hidden") ;
              }else{
                  elem.style.display = 'none';
                  $("#lbl_for_" + elem.getAttribute("id")).addClass("hidden");
              }
        });
    });

Answer 1

keyup处理程序块中的elem.value全部小写。因此，要使匹配不区分大小写，您还需要使用 query.toLowerCase() 将用户键入的值转换为小写。试试这个：

$('#countryName').on('keyup', function () {
    var query = this.value;
    $('[id^="chk_country"]').each(function (i, elem) {
        if (elem.value.indexOf(query.toLowerCase()) != -1) { // note toLowerCase here
            elem.style.display = 'inline';
            $("#lbl_for_" + elem.getAttribute("id")).removeClass("hidden");
        } else {
            elem.style.display = 'none';
            $("#lbl_for_" + elem.getAttribute("id")).addClass("hidden");
        }
    });
});

Answer 2

使用下面的代码使用 query.toLowerCase() 将文本转换为小写。

$('#countryName').on('keyup', function() {
    var query = this.value;
    $('[id^="chk_country"]').each(function(i, elem) {
          if (elem.value.indexOf(query.toLowerCase()) != -1) {
              elem.style.display = 'inline';
              $("#lbl_for_" + elem.getAttribute("id")).removeClass("hidden") ;
          }else{
              elem.style.display = 'none';
              $("#lbl_for_" + elem.getAttribute("id")).addClass("hidden");
          }
    });
});

使搜索不区分大小写

Make search case insensitive

javascript

css

jquery

case-insensitive