Удалить общие отпрыска на клавиша вверх


Я создаю фильтр поиска с помощью jQuery и реализации Array.prototype.filter().

Что я сделал, что я называю $("#dataList tr:first-child ~ tr").remove(); каждый раз, когда пользователь .keyup() на поле ввода. Я хотел бы знать, если там будут проблемы с производительностью, а также если есть какие-либо альтернативное решение для этого.

Я открыт для обратной связи и предложения о том, как я могу улучшить мой код.

var arrayList = [
  { name: "Caty", data: 'Cat' },
  { name: "Doggy", data: 'Dog' },
  { name: "Fishy", data: 'Fish' },
  { name: "Piggy", data: 'Pig' }];

$("#search").keyup((e)=>{
  $("#dataList tr:first-child ~ tr").remove();
  if(e.key != "Backspace"){
    filterItem = $("#search").val().toLocaleLowerCase();
  }else{
    filterItem = "";
  }
  
  var filter = arrayList.filter(array => array.name.toLocaleLowerCase().indexOf(filterItem) !== -1);
  doFilter(filter);
});

doFilter(arrayList);
function doFilter(data){
  $.each(data, function( key, value ) {
    $("#dataList tr:last-child").after("<tr><td>"+value.data+"</td><td>"+value.name+"</td></tr>");
  }); 
}
  
html,body{
  margin:5px 20px;
  font-family: arial;
}

table{
  color:white;
  text-align:center;
}

table, td{
  margin:0;
  padding:0;
  width:200px;
}

th{
  background:#2c3e50;
  padding:5px 0px;
}

td{
  background:#2980b9;
  padding:5px 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Search: <input id="search" type="text"></p>

<table id="dataList">
  <tr>
    <th>Owner</th>
    <th>Pet</th>
  </tr>
</table>



98
2
задан 28 февраля 2018 в 10:02 Источник Поделиться
Комментарии