合并来自多个字段输入的搜索结果

Merge Search Results From Multiple Field Inputs

本文关键字：输入 搜索结果 字段 合并      更新时间：2023-09-26

我问了一个关于实时搜索表的问题，但我有多个字段，如文本和选择下拉字段。我根据我从上一个问题中得到的答案编写了一个 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下拉字段中选择"时间表 1"时，表格应该在"设备名称"列下显示"iPhone"行，在广播节目列下显示"时间表 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();
  }
相关文章：