如何使用搜索参数搜索Html表格数据

$(document).ready(function() {
  var tableValue = [{
      "Distributor Name": "MAIYAS RESTAURANTS PVT LTD",
      "User Name": "admin",
      "User LoginId": "admin",
      "User Password": "admin",
      "User role": "DISTRIBUTOR",
      "Active": "Y"
    },
    {
      "Distributor Name": "MAIYAS RESTAURANTS PVT LTD",
      "User Name": "maiyas",
      "User LoginId": "maiyas",
      "User Password": "maiyas",
      "User role": "DISTRIBUTOR",
      "Active": "Y"
    },
    {
      "Distributor Name": "CHEF BAKERS",
      "User Name": "cbadmin",
      "User LoginId": "cbadmin",
      "User Password": "cbadmin",
      "User role": "DISTRIBUTOR",
      "Active": "Y"
    },
    {
      "Distributor Name": "CHEF BAKERS",
      "User Name": "cbaker",
      "User LoginId": "cbaker",
      "User Password": "cbaker",
      "User role": "DISTRIBUTOR",
      "Active": "Y"
    },
    {
      "Distributor Name": "JAYANAGAR MAIYAS RESTAURANTS PVT LTD",
      "User Name": "jayanagar",
      "User LoginId": "jayanagar",
      "User Password": "jayanagar",
      "User role": "DISTRIBUTOR",
      "Active": "Y"
    },
    {
      "Distributor Name": "MALLESHWARAM MAIYAS RESTAURANTS PVT LTD",
      "User Name": "malleswaram",
      "User LoginId": "malleswaram",
      "User Password": "malleswaram",
      "User role": "DISTRIBUTOR",
      "Active": "Y"
    },
    {
      "Distributor Name": "KOLAR MAIYAS RESTAURANTS PVT LTD",
      "User Name": "kolar",
      "User LoginId": "kolar",
      "User Password": "kolar",
      "User role": "DISTRIBUTOR",
      "Active": "Y"
    }
  ]

  function addTable(tableValue) {
    var col = Object.keys(tableValue[0]);
    var countNum = col.filter(i => !isNaN(i)).length;
    var num = col.splice(0, countNum);
    col = col.concat(num);
    var table = document.createElement("table");
    var tr = table.insertRow(-1);
    for (var i = 0; i < col.length; i++) { //this one to make  thead
      var th = document.createElement("th");
      th.innerHTML = col[i];
      tr.classList.add("text-center");
      tr.appendChild(th);
    }
    for (var i = 0; i < tableValue.length; i++) { // thid one to make tbody
      tr = table.insertRow(-1);
      tr.classList.add("filterData"); //hear i am adding the class in body
      for (var j = 0; j < col.length; j++) {
        var tabCell = tr.insertCell(-1);
        var tabledata = tableValue[i][col[j]];
        if (tabledata && !isNaN(tabledata)) {
          tabledata = parseInt(tabledata);
          tabCell.classList.add("text-right");
        }
        tabCell.innerHTML = tabledata;
      }
      var divContainer = document.getElementById("table");
      divContainer.innerHTML = "";
      divContainer.appendChild(table);
      table.classList.add("table");
      table.classList.add("table-striped");
      table.classList.add("table-bordered");
      table.classList.add("table-hover");
    }
  }
  addTable(tableValue)

  $("#mySelect").on("change", function(e) {
    var header = this.value;
    alert(header)
    $("#myInput").on("keyup", function() {
      var q = $(this).val().toLowerCase();
      if (q === "") {
        $(".filterData").show();
        return true;
      }
      $(".filterData").hide().filter(function(i, el) {
        var d = $(el).text().trim().toLowerCase();
        console.log(q, d, d.indexOf(q));
        return (d.indexOf(q) > -1);
      }).show();
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<select id="mySelect">
  <option disabled></option>
  <option>Distributor Name</option>
  <option>User Name</option>
  <option>User LoginId</option>
  <option>User Password</option>
  <option>User Role</option>
  <option>Active</option>
</select>
<input id="myInput" type="text" placeholder="Search..">
<div id="table"></div>

var tableValue = [{
    "Distributor Name": "MAIYAS RESTAURANTS PVT LTD",
    "User Name": "admin",
    "User LoginId": "admin",
    "User Password": "admin",
    "User role": "DISTRIBUTOR",
    "Active": "Y"
  },
  {
    "Distributor Name": "MAIYAS RESTAURANTS PVT LTD",
    "User Name": "maiyas",
    "User LoginId": "maiyas",
    "User Password": "maiyas",
    "User role": "DISTRIBUTOR",
    "Active": "Y"
  },
  {
    "Distributor Name": "CHEF BAKERS",
    "User Name": "cbadmin",
    "User LoginId": "cbadmin",
    "User Password": "cbadmin",
    "User role": "DISTRIBUTOR",
    "Active": "Y"
  },
  {
    "Distributor Name": "CHEF BAKERS",
    "User Name": "cbaker",
    "User LoginId": "cbaker",
    "User Password": "cbaker",
    "User role": "DISTRIBUTOR",
    "Active": "Y"
  },
  {
    "Distributor Name": "JAYANAGAR MAIYAS RESTAURANTS PVT LTD",
    "User Name": "jayanagar",
    "User LoginId": "jayanagar",
    "User Password": "jayanagar",
    "User role": "DISTRIBUTOR",
    "Active": "Y"
  },
  {
    "Distributor Name": "MALLESHWARAM MAIYAS RESTAURANTS PVT LTD",
    "User Name": "malleswaram",
    "User LoginId": "malleswaram",
    "User Password": "malleswaram",
    "User role": "DISTRIBUTOR",
    "Active": "Y"
  },
  {
    "Distributor Name": "KOLAR MAIYAS RESTAURANTS PVT LTD",
    "User Name": "kolar",
    "User LoginId": "kolar",
    "User Password": "kolar",
    "User role": "DISTRIBUTOR",
    "Active": "Y"
  }
]

function addTable(tableValue) {
  var $tbl = $("<table />", {"class": "table table-striped table-bordered table-hover"}),
      $thd = $("<thead/>"),
       $tb = $("<tbody/>"),
      $trh = $("<tr/>", {"class": "text-center"});

  $.each(Object.keys(tableValue[0]), function(_,val) {
    $("<th/>").html(val).appendTo($trh);
  });
  $trh.appendTo($thd);
  $.each(tableValue, function(_, item) {
    $tr = $("<tr/>", {"class": "filterData"});
    $.each(item, function(key,value) {
      $("<td/>", {"class": "text-right"}).html(value).appendTo($tr);
      $tr.appendTo($tb);
    });
  });
  $tbl.append($thd).append($tb);
  $("#table").html($tbl);
}
$(function() {

  addTable(tableValue)
  $("#myInput").on("input", function() {
    var q = $(this).val().toLowerCase();
    if (q === "") {
      $(".filterData").show();
      return true;
    }
    var fldIdx = $("#mySelect")[0].selectedIndex;
    $(".filterData").hide().filter(function(i, el) {
      var d = fldIdx === 0 ? $(el).text().trim().toLowerCase() : $("td", el).eq(fldIdx - 1).text().trim().toLowerCase()
      // console.log(q, d, d.indexOf(q));
      return (d.indexOf(q) > -1);
    }).show();
  });

  $("#mySelect").on("change", function(e) {
    $("#myInput").trigger("input");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<select id="mySelect">
  <option>All</option>
  <option>Distributor Name</option>
  <option>User Name</option>
  <option>User LoginId</option>
  <option>User Password</option>
  <option>User Role</option>
  <option>Active</option>
</select>
<input id="myInput" type="text" placeholder="Search..">
<div id="table"></div>