如何修复<李>其中用户可以使用大写或小写

how to fix search in <LI>where users can use caps or lowercase?

本文关键字：可以使 用户 lt 何修复 gt      更新时间：2023-09-26

下面是我用于搜索查询的JavaScript，我发现了一个错误，即字母大写或小写的问题。如果列表中的字母是小写字母，那么它只搜索小写字母，但如果你打开大写字母，它什么也找不到。以下是我正在使用的代码。如有任何帮助，我们将不胜感激。

HTML

<input type='search' id='search' placeholder='search'>
<ul>
    <li>example 1</li>
    <li>example 2</li>
    <li>example 3</li>
</ul>

JavaScript

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

您可以将terms设置为小写，然后进行搜索。

var terms = search.val().toLowerCase();

您可以覆盖现有的jquery contains:

jQuery.expr[':'].contains = function(a, i, m) {
  return jQuery(a).text().toUpperCase()
      .indexOf(m[3].toUpperCase()) >= 0;
};
var search = $("#search");
var listItems = $("li");
search.on("keyup", function () {
    var terms = search.val();
    if (terms == '') {
        listItems.show();
    } else {
        listItems.hide();
        $("li:contains('" + terms + "')").show();
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='search' id='search' placeholder='search'>
<ul>
    <li>example 1</li>
    <li>example 2</li>
    <li>example 3</li>
</ul>

或者创建一个新的：

    jQuery.expr[':'].ncontains = function(a, i, m) {
      return jQuery(a).text().toUpperCase()
          .indexOf(m[3].toUpperCase()) >= 0;
    };
var search = $("#search");
var listItems = $("li");
search.on("keyup", function () {
    var terms = search.val();
    if (terms == '') {
        listItems.show();
    } else {
        listItems.hide();
        $("li:ncontains('" + terms + "')").show();
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='search' id='search' placeholder='search'>
<ul>
    <li>example 1</li>
    <li>example 2</li>
    <li>example 3</li>
</ul>

您可以使用toLowerCase:

//elsewhere case may vary but here only case is ignored
$("li:contains('" + terms.toLowerCase() + "')").show();

当你考虑在代码的其他地方使用这个时：

//elsewhere case is ignored by transforming lowercase terms to search for
var terms = search.val().toLowerCase();
相关文章：