jQuery过滤器列表，不区分大小写 [英] Jquery filter list without case sensitive
本文介绍了jQuery过滤器列表，不区分大小写的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想过滤列表而不区分大小写.我只想匹配不匹配大写或小写字母的字符.
I want to filter the list without case sensitive. I want to match only character not match upper case or lower case.
- XXXXXXX
- yyyyyyy
- XXxxx
如果我在搜索框中输入"X"，则会显示1和3.我添加了以下代码，但它也区分大小写.
If I enter "X" in search box it displays both 1 and 3. I added the code below but it match the case sensitive also.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
function filter(element) {
var value = $(element).val();
$("#theList > li").each(function() {
if ($(this).text().search(value) > -1) {
$(this).show();
}
else {
$(this).hide();
}
});
}
</script>
</head>
<body>
<input type="text" onkeyup="filter(this)" />
<ul id="theList">
<li>xxvxvxx</li>
<li>yyyyyyyyyy</li>
<li>rrrrrrrrrr</li>
<li>vvvvvvvvvvv</li>
<li>xcvcvdfsdf</li>
<li>hkjhkhjkh</li>
<li>xzfgfhfgh</li>
</ul>
</body>
</html>
推荐答案
您需要使用indexOf
$(this).text().search(value)
应该是
$(this).text().indexOf(value)
为什么要使用attribute标签附加事件.这是一种不良做法，应避免使用.
And why do you want to attach your event using the attribute tag.It is a bad practice and should be avoided.
您可以使用jQuery附加事件.
You can use jQuery to attach the event.
$('input').keyup(function() {
filter(this);
});
function filter(element) {
var value = $(element).val().toLowerCase();
$("#theList > li").each(function () {
var $this = $(this),
lower = $this.text;
if (lower.indexOf(value) > -1) {
$this.show();
} else {
$this.hide();
}
});
}
Check Fiddle
使用filter
function filter(element) {
var value = $(element).val().toLowerCase();
$("#theList > li").hide().filter(function() {
return $(this).text().toLowerCase().indexOf(value) > -1;
}).show();
}
这篇关于jQuery过滤器列表，不区分大小写的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
