从多个字段输入合并搜索结果 [英] Merge Search Results From Multiple Field Inputs

问题描述

我问了一个关于实时搜索表格的问题但我有多个字段，如文本和选择下拉字段。我根据之前的问题得到的答案写了一个js代码：

I asked a question about live searching a table but I have multiple fields like text and select dropdown fields. I wrote a js code based on the answer I got from my 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 下拉字段，然后表格应显示设备名称列下的iPhone行和广播节目列下的时间表1。我如何合并结果？

For example, I input keywords on deviceName field, the table updates and displays the results, but when I select an option from broadcastProg dropdown field, it also displays the results but only results from the selected option without considering deviceName field's results. So it should be that, say when I input "iPhone" perhaps in deviceName text field and choose "Schedule 1" in broadcastProg dropdown field, then the table should display the rows with "iPhone" under Device Name column and "Schedule 1" under Broadcasted Program column. How do I merge the results then?

此外， deviceName 字段应仅搜索设备名称列，不包括其他列。在我的情况下，它搜索所有列。

Also, deviceName field should only search Device Name column, excluding other columns. In my case, it searches all the columns.

希望有人可以提供帮助。

Hope someone can help out.

推荐答案

考虑你的 deviceName 字段是第一列，那么你可以这样写，只在这一栏中搜索

Consider your deviceName field is the first column then you can write like this to search in this column only

$(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

And your broadcastProg is in second column then you can give td:nth-child(2) instead of td:first-child

对于合并，你需要实现一些逻辑...例如：你正在展示在其他部分的元素对吗？你可以gi这样的条件是这样的

For merging you need to implement some logic..for eg: You are showing element in the else part right? there you can give an if condition like this

if( $("#broadcastProg option:selected").text()== ""){
        $(this).parent().show();
  }

这篇关于从多个字段输入合并搜索结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！