Question

嘿，所以我对搜索输入有疑问，请说如果我想搜索＆＃34; Car＆＃34;如果我只是键入汽车所有小写没有显示相同的事情为大写下面是我的代码的样本以及小提琴的链接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();
  }
});

Answer 1

一种选择是使用.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

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

1 个答案: