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

how to fix issue with search input with case sensitive search?

本文关键字：搜索 大小写 输入 问题 何解决 解决      更新时间：2024-01-15

嘿，所以我的搜索输入有问题，比如说，如果我想搜索"Car"，如果我只键入Car，所有小写字母都没有显示。下面是我的代码示例以及fiddle的链接http://jsfiddle.net/d1dtqxh9/4/如有任何帮助，将不胜感激

HTML

<div class="search">
<form>
<input id="search" type="text" /><input type="submit" value="" />
</form>
</div>
<div id="grid">
<figure>
<div class="image">
<img class="IMG" src="LINK" />
<span class="IMGBOTTOM"></span>
</div>
<div class="POST">
<div class="INFO">
<h3><a href="LINK">Oranges</a></h3>
<p><b class="TYPE">Type: </b>Fruit</p>
<p><b class="location">Location: </b>Goracaries Stores </p>
<p><b class="taste">Tastes: </b>Like Orangishhh</p>
</div>
<div class="postbottom">
<div class="rate"><a class="ratefruits"
href="links">
<span id="duhh" class="duhhh"></span><br>
    <span id="blahh" class="nahh">Like or Naa?</span>
</a>
</div>
<div class="share"><a class="sharefruits"
href="links">
<span id="duhh" class="duhhh"></span><br>
    <span id="blahh" class="nahh">Like or Naa?</span>
</a>
</div>
<div class="clear"> </div>
</div>
</div>
</figure>
    <figure>
<div class="image">
<img class="IMG" src="LINK" />
<span class="IMGBOTTOM"></span>
</div>
<div class="POST">
<div class="INFO">
<h3><a href="LINK">Car</a></h3>
<p><b class="TYPE">Type: </b>Auto Mobile</p>
<p><b class="location">Location: </b>Dealers </p>
<p><b class="taste">Tastes: </b>No Taste </p>
</div>
<div class="postbottom">
<div class="rate"><a class="ratefruits"
href="links">
<span id="duhh" class="duhhh"></span><br>
    <span id="blahh" class="nahh">Speedy or Naa?</span>
</a>
</div>
<div class="share"><a class="sharefruits"
href="links">
<span id="duhh" class="duhhh"></span><br>
    <span id="blahh" class="nahh">Speedy or Naa?</span>
</a>
</div>
<div class="clear"> </div>
</div>
</div>
</figure>
    <figure>
<div class="image">
<img class="IMG" src="LINK" />
<span class="IMGBOTTOM"></span>
</div>
<div class="POST">
<div class="INFO">
<h3><a href="LINK">House</a></h3>
<p><b class="TYPE">Type: </b>Home</p>
<p><b class="location">Location: </b>Casa </p>
<p><b class="taste">Tastes: </b>Home Sweet Home</p>
</div>
<div class="postbottom">
<div class="rate"><a class="ratefruits"
href="links">
<span id="duhh" class="duhhh"></span><br>
    <span id="blahh" class="nahh">Like or Naa?</span>
</a>
</div>
<div class="share"><a class="sharefruits"
href="links">
<span id="duhh" class="duhhh"></span><br>
    <span id="blahh" class="nahh">Like or Naa?</span>
</a>
</div>
<div class="clear"> </div>
</div>
</div>
</figure>
    <figure>
<div class="image">
<img class="IMG" src="LINK" />
<span class="IMGBOTTOM"></span>
</div>
<div class="POST">
<div class="INFO">
<h3><a href="LINK">Sky</a></h3>
<p><b class="TYPE">Type: </b>Nature</p>
<p><b class="location">Location: </b>SKy</p>
<p><b class="taste">Tastes: </b>Rain</p>
</div>
<div class="postbottom">
<div class="rate"><a class="ratefruits"
href="links">
<span id="duhh" class="duhhh"></span><br>
    <span id="blahh" class="nahh">Like or Naa?</span>
</a>
</div>
<div class="share"><a class="sharefruits"
href="links">
<span id="duhh" class="duhhh"></span><br>
    <span id="blahh" class="nahh">Like or Naa?</span>
</a>
</div>
<div class="clear"> </div>
</div>
</div>
</figure>

JavaScript

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

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

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

演示：Fiddle

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

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

演示：Fiddle

相关文章：