remove default search box and add custom one in jquery datatable

As Guruprasad mentioned, 'bfilter': false removes the search functionality. So you need to use the 'dom' option.

Also dom comes with markup and styling functionalities. So if you need the exact datatable styling then you should use

$('#example').dataTable( {dom: '<"row"lr><"row"<"col-xs-12"t>><"row"<"col-sm-6"i><"col-sm-6"p>>'});

For Hiding Default Search Input box of Data tables AS:
by default sDom="lftipr";

Perform these operations on datatables
'l' - Length changing
'f' - Filtering input
't' - The table!
'i' - Information
'p' - Pagination
'r' - pRocessing
For removing default search box just remove the f character from sDom.

like:

$('#table').DataTable({
  "sDom":"ltipr"
});

Hope this must work

bFilter actually removes the search functionality so what I suggest it just hide the default search and then you can implement your custom search with the code you have already written. Just check below code:

#example_filter //#example is your table id, so you can replace it with whatever Id you give to table
{
    display:none;
}

Note : Remove bFilter during initialization

Then your normal coding. Here is the DEMO

You can use the dom option to hide the search input without disabling the search functionality. This is useful if you want to provide your own inputs for searching (perhaps on a column by column basis, or globally). It also accomplishes what you asked for initially - remove the original search input without using CSS.

Here is the documentation: https://datatables.net/examples/basic_init/dom.html

And, of course, an example:

var table = $('#example').DataTable({
        paging: false,
        bFilter: false,
        ordering: false,
        searching: true,
        dom: 't'         // This shows just the table
    });

You could also use this method to render the search input in a different place. Depending on where you need to render the input, you may be able to avoid using a custom one altogether.