Javascript 基于文本框输入重新初始化位置的自动不区分大小写搜索div

我正在使用一个简单的示例，根据textbox中的输入搜索div

我想让它自动搜索启用，不应该依赖于“提交”按钮。搜索也必须不区分大小写

下面是小代码

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>

------------自标记重复后更新----------- 我试过使用下面的代码

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

问题是div的位置没有刷新，它必须初始化到页面的开头。由于有许多div具有类

misc

，因此在搜索后，预期div将显示为相同的位置。我想重新初始化它的位置

下面是支持图片

无搜索

搜索后

---

Ahmad Alfy，Zakaria Acharki。不，问题不一样。他问了一个稍微不同的问题。请大家在回答或结束之前仔细阅读问题。艾哈迈德·阿尔菲，扎卡里亚·阿查基。不，问题不一样。他问了一个稍微不同的问题。请大家在回答或结束之前仔细阅读问题。

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