Check out this code snippet.
HTML Code: X.html
<input type="text" id="search-criteria"/>
<input type="button" id="search" value="search"/>
<div class="col-sm-3">
<div class="misc">
<div class="box box-info">
<div class="box-header with-border">
<h3 class="box-title">Services</h3>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="misc">
<div class="box box-warning">
<div class="box-header with-border">
<h3 class="box-title">Branches</h3>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="misc">
<div class="box box-danger">
<div class="box-header with-border">
<h3 class="box-title">Firm Type</h3>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="misc">
<div class="box box-success">
<div class="box-header with-border">
<h3 class="box-title">Designations</h3>
</div>
</div>
</div>
</div>
Javascript Code: X.js
$('#search-criteria').keyup(function(){
$('.misc').hide();
var regex = new RegExp($('#search-criteria').val(), 'i');
$('.misc').filter(function() {
return regex.test($(this).text());
}).show();
});
I have implemented the above code and it works fine. However, I am facing an issue where the position of the displayed div is not refreshed to the top of the page. There are several divs with the class misc. After searching for a specific content, the matching div is visible but stays in its original position. I would like the div's position to reset to the beginning of the page once a search is performed. Additionally, when the search input is cleared, all divs should be visible as before.
Here is an image depicting the current behavior:
No Search:
https://i.sstatic.net/aVfiq.png
After Search:
https://i.sstatic.net/rF5SN.png
Expected Output: