<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container search-table">
<div class="search-box">
<div class="row">
<div class="col-md-3">
<h5>Search All Fields</h5>
</div>
<div class="col-md-9">
<input type="text" id="myInput" onkeyup="myFunction()" class="form-control" placeholder="Search all fields e.g. HTML">
<script>
$(document).ready(function () {
$("#myInput").on("keyup", function () {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function () {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
</div>
</div>
</div>
<div class="search-list">
<h3>303 Records Found</h3>
<table class="table" id="myTable">
<thead>
<tr>
<th>Title</th>
<th>Category</th>
</tr>
</thead>
<tbody>