從多個字段輸入合併搜索結果

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(); 
    }