Getting search bar to simultaneously work with another search bar

Question

I built a DataTables table and it comes with its own search bar, but I'm not happy with its default location. It's a major headache to use CSS to move it anywhere outside of the table's div so I've decided to link it with my own custom search bar...i.e., typing in the custom search triggers the DataTables one. The end goal is to hide the DataTables search with the custom filter acting as the main one.

I know that I want the custom search to trigger on .keypress(), but other than that I don't know how to link the two searches together and how to get them to work simultaneously. I didn't see any info about doing to on SO (if there is, please point me in the right direction) or on the DT forums.

DataTable:

$('#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
    });

Custom searchbar functionality:

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

DataTables CSS:

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

Custom searchbar:

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