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

时间:2016-02-19 01:58:12

标签: javascript jquery

我问了一个关于live searching a table的问题,但我有多个字段,如文字和选择下拉字段。我根据我从previous question得到的答案写了一个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”行名称列和“广播计划”列下的“计划1”。我如何合并结果?

此外,deviceName字段应仅搜索“设备名称”列,不包括其他列。就我而言,它会搜索所有列。

希望有人可以提供帮助。

1 个答案:

答案 0 :(得分:0)

考虑您的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();
  }