Question

下面是我用于搜索查询的JavaScript我发现的bug是字母大写或小写的问题。如果列表中的字母是小写的，那么它只搜索小写但是如果你打开它的大写它没有找到任何东西。以下是我正在使用的代码，我们将不胜感激。

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();
    }
});

Answer 1

您可以将terms小写，然后搜索。

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

Answer 2

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

Answer 3

您可以覆盖现有的jquery contains：

＆＃13;

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();
    }
});

＆＃13;

<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>

＆＃13;

或者创建一个新的：

＆＃13;

    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();
    }
});

＆＃13;

<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>

＆＃13;

如何在用户可以使用大写或小写的<li>中修复搜索？</li>

3 个答案: