2
\$\begingroup\$

I am creating a search filter using jQuery and implementing Array.prototype.filter().

What I have done is that I call the $("#dataList tr:first-child ~ tr").remove(); every time the user .keyup() on the input field. I would like to know if there will be a performance issue and also if there is any alternative workaround for this.

I am open for any feedback and suggestion on how I can enhance my code.

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>

\$\endgroup\$
  • \$\begingroup\$ when you add a character to the search, instead of searching all the array you can only filter the current ones, as it will be a subset of previous search. You can also only remove the rows that do not match instead of removing all and then add the ones that match, but not sure if that will be faster or slower, would need to be tested with many rows. As for character deletion, if you store previous searches results you can already know what should be displayed \$\endgroup\$ – juvian Feb 28 '18 at 15:50
  • \$\begingroup\$ @juvian your comment should be an answer \$\endgroup\$ – janos Feb 28 '18 at 19:23
  • \$\begingroup\$ Well depends a lot on his usage, not worth doing all those optimizations for 1000 rows or less. Also busy today ^^ \$\endgroup\$ – juvian Feb 28 '18 at 21:08
  • \$\begingroup\$ @juvian thanks for the input I'll try to do what you have suggested. I think if the data would be 1000 rows above I'll have to implement a pagination to make the performance optimized am I right? or is there any other workaround? \$\endgroup\$ – davecar21 Feb 28 '18 at 22:04
  • 1
    \$\begingroup\$ You can probably manage with over 1000 rows in an efficient way but should be too stuff on screeen for the user, better to paginate. \$\endgroup\$ – juvian Mar 1 '18 at 15:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.