获取搜索栏以与另一个搜索栏同时使用

Question

我建立了一个DataTables表，它带有自己的搜索栏，但是我对它的默认位置不满意。使用CSS将其移动到表格div之外的任何地方都非常麻烦，因此我决定将其与自己的自定义搜索栏链接 ...即，输入自定义搜索会触发DataTables一。最终目标是隐藏以自定义过滤器为主的DataTables搜索。

我知道我希望自定义搜索在.keypress()上触发，但除此之外，我不知道如何将这两个搜索链接在一起以及如何使它们同时工作。在SO（如果有的话，请向我指出正确的方向）或DT论坛上，我没有看到任何有关这样做的信息。

数据表：

$('#km-table-id').DataTable( {
      columns: [
        { data: "Titles" }, // populates col-2 column with docs
        { data: "Categories" } // hidden col-3 categories
        //{ data: "Blank" } // Use if necessary
      ],
      columnDefs: [
        {
          data: "Path",
          render: function(data, type, row) {
            return $('<a>')
              .attr({target: "_blank", href: row.Path})
              .text(data)
              .wrap('<div></div>')
              .parent()
              .html();
          },
          targets: 0
        },
        { searchable: true, targets: [1], visible: false }, 
      ],
      data: tableRes,
      // fields: [{ label: "My Favorites:", name: "faves", type: "checkbox" }],
      language: { searchPlaceholder: "Search All Documents" },
      order: [],
      pageLength: 500,
      pagingType: "full_numbers",
      responsive: true,
        scrollCollapse: true,
        scrollX: true,
        scrollY: 450
    });

自定义搜索栏功能：

$("#searchbar").keypress(function() {
   // stuff here ///////
  //// not sure what //
  console.log("Handler for .keypress() called");
})

DataTables CSS：

.dataTables_wrapper .dataTables_filter {
    /* visibility: hidden;  */
}

自定义搜索栏：

<div class="form-group">
   <input 
      type="search" 
      class="form-control" 
      id="searchbar" 
      placeholder="Search All Documents...">
</div>