[英]Merge Search Results From Multiple Field Inputs
我问了一个有关实时搜索表格的问题,但我有多个字段,例如文本,然后选择下拉字段。 我写了基于我从我得到了答案一个js代码前面的问题 :
$("#deviceName").keyup(function(){
var deviceNameFilter = $(this).val();
$("#device-list_table tbody tr").each(function(){
if ($(this).text().search(new RegExp(deviceNameFilter, "i")) < 0) {
$(this).hide();
} else {
$(this).show();
}
});
});
$("#broadcastProg").change(function(){
var broadcastProgFilter = $("#broadcastProg option:selected").text();
$("#device-list_table tbody tr").each(function(){
if ($(this).text().search(new RegExp(broadcastProgFilter, "i")) < 0) {
$(this).hide();
} else {
$(this).show();
}
});
});
$("#store").change(function(){
var storeFilter = $("#store option:selected").text();
$("#device-list_table tbody tr").each(function(){
if ($(this).text().search(new RegExp(storeFilter, "i")) < 0) {
$(this).hide();
} else {
$(this).show();
}
});
});
$("#deviceModel").change(function(){
var deviceModelFilter = $("#deviceModel option:selected").text();
$("#device-list_table tbody tr").each(function(){
if ($(this).text().search(new RegExp(deviceModelFilter, "i")) < 0) {
$(this).hide();
} else {
$(this).show();
}
});
});
$("#deviceStatus").change(function(){
var deviceStatusFilter = $("#deviceStatus option:selected").text();
$("#device-list_table tbody tr").each(function(){
if ($(this).text().search(new RegExp(deviceStatusFilter, "i")) < 0) {
$(this).hide();
} else {
$(this).show();
}
});
});
$("#logOutputLog").keyup(function(){
var logOutputLogFilter = $(this).val();
$("#device-list_table tbody tr").each(function(){
if ($(this).text().search(new RegExp(logOutputLogFilter, "i")) < 0) {
$(this).hide();
} else {
$(this).show();
}
});
});
例如,我在deviceName
字段上输入关键字,该表会更新并显示结果,但是当我从broadcastProg
下拉字段中选择一个选项时,它还会显示结果,但仅显示所选选项的结果,而不考虑deviceName
字段的结果。 因此应该是这样的,例如,当我在deviceName
文本字段中输入“ iPhone”并在broadcastProg
下拉字段中选择“ Schedule 1”时,该表应在“设备名称”列下显示“ iPhone”,在“ Device 1”列下显示“ Schedule 1”广播节目栏。 那我该如何合并结果呢?
另外, deviceName
字段应仅搜索“设备名称”列,但不包括其他列。 就我而言,它搜索所有列。
希望有人可以帮忙。
考虑到您的deviceName
字段是第一列,那么您可以像这样编写以仅在此列中进行搜索
$(document).ready(function(){
$("#deviceName").keyup(function(){
var deviceNameFilter = $(this).val();
$("#device-list_table td:first-child ").each(function(){
if ($(this).text().search(new RegExp(deviceNameFilter, "i")) < 0) {
$(this).parent().hide();
}else {
$(this).parent().show();
}
});
});
并且您的broadcastProg
在第二列中,那么您可以给td:nth-child(2)
而不是td:first-child
对于合并,您需要实现一些逻辑。例如:您在else部分中显示元素,对吗? 在那里你可以给出一个if条件
if( $("#broadcastProg option:selected").text()== ""){
$(this).parent().show();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.