javascript - 从N个这样的div中过滤时如何重新初始化一个div位置

Question

下面是小代码。

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>

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();
});

我试过上面的代码，它可以工作，但是，问题是 div 的位置没有刷新，它必须初始化到页面的开始。有很多类misc 的div。搜索预期的 div 后，它 可见但保持在同一位置。我希望重新初始化它的位置，并且当我清除搜索输入时，所有内容都必须保持原样可见。

下面是辅助图片，

没有搜索

搜索后

预期输出

Answer 1

您只是将 div 隐藏在内部您的列布局中，因此列仍然以其宽度显示。您应该隐藏 col-sm-3 div 来实现您的需要。