Javascript 如何使用区分大小写的搜索解决搜索输入问题？

嘿，所以我对搜索输入有问题，比如说，如果我想搜索“车”，如果我只键入车所有小写字母没有显示相同的东西，大写字母下面是我的代码样本以及小提琴的链接。任何帮助都将不胜感激

HTML

---

一种选择是使用.filter（）和toLowerCase（）

演示：

另一种选择是使用正则表达式

if (!RegExp.escape) {
    RegExp.escape = function (value) {
        return value.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&")
    };
}

var search = $("#search");
var listItems = $("figure");

search.on("keyup", function () {
    var terms = search.val(),
        regex = new RegExp(RegExp.escape(terms), 'i');
    if (terms == '') {
        listItems.show();
    } else {
        listItems.hide();
        $("figure").filter(function () {
            return regex.test($(this).text());
        }).show();
    }
});

---

演示：

如果可能，只需将两者转换为小写或大写，大小写就会匹配

var search = $("#search");
var listItems = $("figure");

search.on("keyup", function() {
  var terms = search.val();
  if (terms == '') {
    listItems.show();
  } else {
    listItems.hide(); 
    $("figure:contains('" + terms + "')").show();
  }
});

search.on("keyup", function () {
    var terms = search.val().toLowerCase();
    if (terms == '') {
        listItems.show();
    } else {
        listItems.hide();
        $("figure").filter(function () {
            return $(this).text().toLowerCase().indexOf(terms) > -1
        }).show();
    }
});

if (!RegExp.escape) {
    RegExp.escape = function (value) {
        return value.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&")
    };
}

var search = $("#search");
var listItems = $("figure");

search.on("keyup", function () {
    var terms = search.val(),
        regex = new RegExp(RegExp.escape(terms), 'i');
    if (terms == '') {
        listItems.show();
    } else {
        listItems.hide();
        $("figure").filter(function () {
            return regex.test($(this).text());
        }).show();
    }
});