Question

下面在JSFiddle链接中，我有一个国家/地区选择过滤器的项目。

在搜索栏中，您可以在过滤器中填写所需的国家/地区。但是它只适用于使用小写的情况。我试图编辑我的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

elem.value处理程序块中的keyup全部为小写。因此，要使匹配不区分大小写，您需要使用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()将文本转换为LowerCase。

$('#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");
          }
    });
});

使搜索大小写不敏感

2 个答案: