jquery - 隐藏与用户输入不匹配的元素

Question

尝试在用户键入文本时过滤一组元素。我希望包含与正在键入的内容匹配的元素移动到顶部，而其他元素同时隐藏。我的代码隐藏了所有内容。

$('input#sort-plate').keyup(function () {
        var value = $('input#sort-plate').val();

        var match = $(".name").filter(function() {
            // don't do this -> return $(this).text().match(new RegExp(value, "i"));
            return $(this).text().toLowerCase().indexOf(value) !== -1;
        });
        if (match.length) {
            $(".sort-plate").first().before(match.first().parent()).addClass('show-me');
        }
     $(".sort-plate").hide();
    });

.name, .center, .phone {
    font-size: 14px;
    color: green;
    margin-bottom: 15px;
    display: inline-block;
}
.name {
    width: 55%
}
.center, .phone {
    width: 20%;
}
.sort-by {
    color: red;
}
strong {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="plate">
    <form action="#">
        <input type="text" id="sort-plate" />
     
      
        </form>
        <br />
        <br />
        <div class="sort-plate">
            <div class="name"> <strong>Name</strong> Chibueze Okechukwu</div>
            <div class="center"> <strong>Department</strong> Act Center</div>
            <div class="phone"> <strong>Ext</strong> 5204</div>
        </div>
        <div class="sort-plate">
            <div class="name"> <strong>Name</strong> Angelina Jolie</div>
            <div class="center"> <strong>Department</strong> Act Center</div>
            <div class="phone"> <strong>Ext</strong> 5204</div>
        </div>
        <div class="sort-plate">
            <div class="name"> <strong>Name</strong> Michael Jordan</div>
            <div class="center"> <strong>Department</strong> Act Center</div>
            <div class="phone"> <strong>Ext</strong> 5204</div>
        </div>
        <div class="sort-plate">
            <div class="name"> <strong>Name</strong> Deka Junior</div>
            <div class="center"> <strong>Department</strong> Act Center</div>
            <div class="phone"> <strong>Ext</strong> 5204</div>
        </div>
        <div class="sort-plate">
            <div class="name"> <strong>Name</strong> Chris Okorondu</div>
            <div class="center"> <strong>Department</strong> Act Center</div>
            <div class="phone"> <strong>Ext</strong> 5204</div>
    </div>
        <div class="sort-plate">
            <div class="name"> <strong>Name</strong> Angela Jones</div>
            <div class="center"> <strong>Department</strong> Act Center</div>
            <div class="phone"> <strong>Ext</strong> 5204</div>
        </div>
        <div class="sort-plate">
            <div class="name"> <strong>Name</strong> Ikechukwu Adaora</div>
            <div class="center"> <strong>Department</strong> Act Center</div>
            <div class="phone"> <strong>Ext</strong> 5204</div>
        </div>
    
     <div class="sort-plate">
            <div class="name"> <strong>Name</strong> Chris Okorondu</div>
            <div class="center"> <strong>Department</strong> Act Center</div>
            <div class="phone"> <strong>Ext</strong> 5204</div>
        </div>
        
         <div class="sort-plate">
            <div class="name"> <strong>Name</strong> Chris Ndolo</div>
            <div class="center"> <strong>Department</strong> Act Center</div>
            <div class="phone"> <strong>Ext</strong> 5204</div>
        </div>
        
         <div class="sort-plate">
            <div class="name"> <strong>Name</strong> Chris Stones</div>
            <div class="center"> <strong>Department</strong> Act Center</div>
            <div class="phone"> <strong>Ext</strong> 5204</div>
        </div>
        
         <div class="sort-plate">
            <div class="name"> <strong>Name</strong> Chris Johnson</div>
            <div class="center"> <strong>Department</strong> Act Center</div>
            <div class="phone"> <strong>Ext</strong> 5204</div>
        </div>
</div>

Answer 1

$('input#sort-plate').keyup(function () {
  var value = $('input#sort-plate').val();
  $(".sort-plate").hide();
  var match = $(".name").filter(function() {
    return $(this).text().toLowerCase().indexOf(value) !== -1;
  });
  for(var i = 0; i < match.length; i++) {
    match.closest('.sort-plate').show();
  }
});

.name, .center, .phone {
    font-size: 14px;
    color: green;
    margin-bottom: 15px;
    display: inline-block;
}
.name {
    width: 55%
}
.center, .phone {
    width: 20%;
}
.sort-by {
    color: red;
}
strong {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="plate">
  <form action="#">
    <input type="text" id="sort-plate" />
  </form>
  <br />
  <br />
  <div class="sort-plate">
    <div class="name"> <strong>Name</strong> Chibueze Okechukwu</div>
    <div class="center"> <strong>Department</strong> Act Center</div>
    <div class="phone"> <strong>Ext</strong> 5204</div>
  </div>
  <div class="sort-plate">
    <div class="name"> <strong>Name</strong> Angelina Jolie</div>
    <div class="center"> <strong>Department</strong> Act Center</div>
    <div class="phone"> <strong>Ext</strong> 5204</div>
  </div>
  <div class="sort-plate">
    <div class="name"> <strong>Name</strong> Michael Jordan</div>
    <div class="center"> <strong>Department</strong> Act Center</div>
    <div class="phone"> <strong>Ext</strong> 5204</div>
  </div>
  <div class="sort-plate">
    <div class="name"> <strong>Name</strong> Deka Junior</div>
    <div class="center"> <strong>Department</strong> Act Center</div>
    <div class="phone"> <strong>Ext</strong> 5204</div>
  </div>
  <div class="sort-plate">
    <div class="name"> <strong>Name</strong> Chris Okorondu</div>
    <div class="center"> <strong>Department</strong> Act Center</div>
    <div class="phone"> <strong>Ext</strong> 5204</div>
  </div>
  <div class="sort-plate">
    <div class="name"> <strong>Name</strong> Angela Jones</div>
    <div class="center"> <strong>Department</strong> Act Center</div>
    <div class="phone"> <strong>Ext</strong> 5204</div>
  </div>
  <div class="sort-plate">
    <div class="name"> <strong>Name</strong> Ikechukwu Adaora</div>
    <div class="center"> <strong>Department</strong> Act Center</div>
    <div class="phone"> <strong>Ext</strong> 5204</div>
  </div>

  <div class="sort-plate">
    <div class="name"> <strong>Name</strong> Chris Okorondu</div>
    <div class="center"> <strong>Department</strong> Act Center</div>
    <div class="phone"> <strong>Ext</strong> 5204</div>
  </div>

  <div class="sort-plate">
    <div class="name"> <strong>Name</strong> Chris Ndolo</div>
    <div class="center"> <strong>Department</strong> Act Center</div>
    <div class="phone"> <strong>Ext</strong> 5204</div>
  </div>

  <div class="sort-plate">
    <div class="name"> <strong>Name</strong> Chris Stones</div>
    <div class="center"> <strong>Department</strong> Act Center</div>
    <div class="phone"> <strong>Ext</strong> 5204</div>
  </div>

  <div class="sort-plate">
    <div class="name"> <strong>Name</strong> Chris Johnson</div>
    <div class="center"> <strong>Department</strong> Act Center</div>
    <div class="phone"> <strong>Ext</strong> 5204</div>
  </div>
</div>