使用包含选择器在多列中搜索
Posted
技术标签:
【中文标题】使用包含选择器在多列中搜索【英文标题】：Search in multiple columns using contains selectors 【发布时间】：2014-08-28 17:12:57 【问题描述】：我正在创建一个用户可以在多个列中搜索的搜索。
我使用 jQuery :contains 实现了对单列的搜索，但没有得到如何进行多列搜索？
代码：
<table border="1" cellpadding="10">
<tr style="background:#428bca; color:#fff;">
<th>Name</th>
<th>Number</th>
</tr>
<tr>
<td>
<input type="text" onkeyup="search('name', this.value);" />
</td>
<td>
<input type="text" onkeyup="search('number', this.value);" />
</td>
</tr>
<tr>
<td class="search_name">abcd</td>
<td class="search_number">12345</td>
</tr>
<tr>
<td class="search_name">abcd</td>
<td class="search_number">67890</td>
</tr>
<tr>
<td class="search_name">ijkl</td>
<td class="search_number">00000</td>
</tr>
<tr>
<td class="search_name">mnop</td>
<td class="search_number">00000</td>
</tr>
</table>
此处为 Java 脚本代码：
function search(field, val)
if (val.length > 1)
$('.search_name').parent('tr').hide();
$.expr[":"].contains = $.expr.createPseudo(function(arg)
return function(elem)
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
;
);
if (field == 'name')
$('.search_name:contains(' + val + ')').parent('tr').show();
if (field == 'number')
$('.search_number:contains(' + val + ')').parent('tr').show();
else
$('.search_name').parent('tr').show();
从上面的代码中，它一次搜索单个列，但我想在 name abcd 和 number 12345 中搜索单词，所以它只显示1 行同时匹配两个关键字。
DEMO PLUNKER
【问题讨论】：
对不起，我不明白你的目标。输入这些搜索词已经让您进入 1 行。您是否希望它们出现在单个搜索条目字段中？ @SMcCrohan 请检查我的插件，在第一个 txtbox 中写abcd 它会显示 2 个结果，然后如果你在第二个 txtbox 中写 12345 它应该只显示 1 个结果
啊！实际上，我确实得到了你想要的结果（它减少到 1 行），但这仅仅是因为你选择的数据。如果您将 ijl 行更改为也将 12345 作为其编号，那么您可以看到它已损坏。
看看jsfiddle.net/L8LEp
【参考方案1】：
试试这个
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<table border="1" cellpadding="10">
<tr style="background:#428bca; color:#fff;">
<th>Name</th>
<th>Number</th>
</tr>
<tr>
<td>
<input id="searchName" type="text" onkeyup="search();" />
</td>
<td>
<input id="searchNumber" type="text" onkeyup="search();" />
</td>
</tr>
<tr class="data">
<td class="search_name">abcd</td>
<td class="search_number">12345</td>
</tr>
<tr class="data">
<td class="search_name">abcd</td>
<td class="search_number">67890</td>
</tr>
<tr class="data">
<td class="search_name">ijkl</td>
<td class="search_number">00000</td>
</tr>
<tr class="data">
<td class="search_name">mnop</td>
<td class="search_number">00000</td>
</tr>
</table>
<script>
function search()
var searchName = $("#searchName").val() || '';
var searchNumber = $("#searchNumber").val() || '';
if (searchName == '' && searchNumber == '')
$('tr.data').show();
else
$('tr.data').hide();
if (searchName != '' && searchNumber != '')
var eleSearchName = $(".search_name:contains(" + searchName + ")");
if (eleSearchName.length > 0)
$.each(eleSearchName, function ()
if ($(this).next("td.search_number:contains(" + searchNumber + ")").length > 0)
$(this).parent('tr').show();
);
else if (searchName != '')
$('.search_name:contains(' + searchName + ')').parent('tr').show();
else if (searchNumber != '')
$('.search_number:contains(' + searchNumber + ')').parent('tr').show();
else
$('tr.data').show();
</script>
</body>
</html>
更新：试试这个通用代码最多 N 列:)
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<table border="1" cellpadding="10">
<tr style="background:#428bca; color:#fff;">
<th>Name</th>
<th>Number</th>
</tr>
<tr>
<td>
<input class="searchbox" data-class="search_name" type="text" />
</td>
<td>
<input class="searchbox" data-class="search_number" type="text" />
</td>
</tr>
<tr class="data">
<td class="search_name">abcd</td>
<td class="search_number">12345</td>
</tr>
<tr class="data">
<td class="search_name">abcd</td>
<td class="search_number">67890</td>
</tr>
<tr class="data">
<td class="search_name">ijkl</td>
<td class="search_number">00000</td>
</tr>
<tr class="data">
<td class="search_name">mnop</td>
<td class="search_number">00000</td>
</tr>
</table>
<script>
$(".searchbox").on('keyup', function ()
if ($(this).val() != '')
search(this);
else
$(".data").show();
$.each($(".searchbox"), function ()
if ($(this).val() != '')
$(this).keyup();
);
);
function search(ele)
var val = $(ele).val() || '';
if (val == '')
return;
var dataclass = $(ele).attr('data-class');
var SearchInText = '';
$.each($(".data:visible"), function ()
SearchInText = $(this).find("td." + dataclass).text();
if (SearchInText.indexOf(val) == -1)
$(this).hide();
);
</script>
</body>
</html>
【讨论】：
以上是关于使用包含选择器在多列中搜索的主要内容，如果未能解决你的问题，请参考以下文章