从多个字段输入合并搜索结果

Question

我问了一个关于live searching a table的问题，但我有多个字段，如文本和选择下拉字段。我写了一个js代码基于我从previous question得到了答案：

$("#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”的行并且在下面显示“Schedule 1”广播节目专栏。那我该如何合并结果呢？

另外，deviceName字段只应搜索设备名称列，不包括其他列。就我而言，它会搜索所有列。

希望有人可以帮忙。

Answer 1

考虑您的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($("#broadcastProg option:selected").text()== ""){ 
     $(this).parent().show(); 
    }