我发现了Nachito的一个jsfiddle几乎可以做我想要的。唯一的区别是我需要用表而不是列表来做这件事。
这是Nachito的http://jsfiddle.net/nachito/QhL2M/24/
<form class="filterform" action="#">
<input class="filterInput" type="text">
</form>
<ul id="list">
<li>Australia</li>
<li>hello hi bye goodbye</li>
<li>hello|hi|bye|goodbye</li>
<li>Belgium</li>
<li>Brazil</li>
<li>Canada Denmark hello</li>
<li>Denmark</li>
</ul>
(function($) {
$('.filterInput').keyup(function() {
var inputValue = $(this).val();
if (inputValue.length > 2) {
var inputWords = inputValue.toLowerCase().split(/[\s,]+/);
var $matches = $('#list li').filter(function() {
for (i in inputWords) {
if ($.trim(inputWords[i]) == "") {
continue;
}
var r = new RegExp('\\b(' + inputWords[i] + ')(s|es|\'s)?\\b', 'i');
if (r.test($(this).text())) {
return true;
}
}
return false;
});
if ($matches.length) {
$matches.slideDown(400);
$('#list li').not($matches).slideUp();
} else {
$('#list li').slideDown();
}
} else {
$('#list li').slideDown();
}
return false;
})
}(jQuery));
这是我的前叉http://jsfiddle.net/sptrsn/d6anawnn/5/
<form class="filterform" action="#">
<input class="filterInput" type="text">
</form>
<table id="list">
<tr><td>Australia</td></tr>
<tr><td>hello hi bye goodbye</td></tr>
<tr><td>hello|hi|bye|goodbye</td></tr>
<tr><td>Belgium</td></tr>
<tr><td>Brazil</td></tr>
<tr><td>Canada Denmark hello</td></tr>
<tr><td>Denmark</td></tr>
</table>
(function($) {
$('.filterInput').keyup(function() {
var inputValue = $(this).val();
if (inputValue.length > 2) {
var inputWords = inputValue.toLowerCase().split(/[\s,]+/);
var $matches = $('table tr td').filter(function() {
for (i in inputWords) {
if ($.trim(inputWords[i]) == "") {
continue;
}
var r = new RegExp('\\b(' + inputWords[i] + ')(s|es|\'s)?\\b', 'i');
if (r.test($(this).text())) {
return true;
}
}
return false;
});
if ($matches.length) {
$matches.slideDown(400);
$('table tr').not($matches).slideUp();
} else {
$('table tr').slideDown();
}
} else {
$('table tr').slideDown();
}
return false;
})
}(jQuery));
我将html更改为一个带有一个td元素的简单表。 在js中,我将三个jQuery选择器更改为&#39; tr td&#39;而不是&#39; li&#39;
此时,它只是隐藏所有数据。
重点...我想要一个简单的过滤功能,它将根据包含的标签对行列表进行子集化。一旦我使这个基本函数工作,我将需要一些额外的td元素,因此希望在表中执行此操作。
答案 0 :(得分:1)
if ($matches.length) {
$matches.slideDown(400);
$('#list tr').children().not($matches).slideUp();
} else {
$('#list tr').children().slideDown();
}
} else {
$('#list tr').slideDown();
}
return false;
})
答案 1 :(得分:0)
亲爱的你最好使用http://www.datatables.net/一个带有大量选项的jquery插件,它将节省时间和精力