Auto case insensitive search a div with position reinitialised based on textbox input

Question

I am using a simple example http://jsfiddle.net/WBvTj/2/ to search a div based on input in textbox.

I want to make it auto-search enabled and should not depend upon "Submit" button. The search too must be case-insensitive.

Below is small code.

X.html

<input type="text" id="search-criteria"/>
<input type="button" id="search" value="search"/>
<div class="misc"> Manish
</div>
<div class="misc"> Ankur
</div>
<div class="misc"> Kumar
</div>

X.js

$('#search').click(function(){
    $('.misc').hide();
   var txt = $('#search-criteria').val();
   $('.misc:contains("'+txt+'")').show();
});

------------UPDATED SINCE MARKED DUPLICATE----------- I tried with the code below,

$('#search-criteria').keyup(function(){
    $('.misc').hide();
    var regex = new RegExp($('#search-criteria').val(), 'i');
    $('.misc').filter(function() {
       return regex.test($(this).text());
    }).show();
});

The problem is that the position of the div is not refreshed, it must be initialised to start of page. Since there are many div with class misc, after searching the expected div is visible as it is as the same position. I want it's position to be reinitialised.

Below is the supporting image,

NO SEARCH

AFTER SEARCH