How to display no data if the data is not in the list in jQuery Filter?

I have list of filter table with jQuery. If user is searching the data that existed in the table it will filter and displayed the data. But if user search data that not existed in the data I want to display the not found. How to I displayed the not found in the filter function ?

$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="myInput" type="text" placeholder="Search..">
<br><br>

<table>
  <thead>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Email</th>
  </tr>
  </thead>
  <tbody id="myTable">
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>Mary</td>
    <td>Moe</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>July</td>
    <td>Dooley</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>Anja</td>
    <td>Ravendale</td>
    <td>[email protected]</td>
  </tr>
  </tbody>
</table>

Contents hide

Answers:

Method 1

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

$(document).ready(function(){
  // select notFound row
  var notFound = $("#notFound")
  // make it hidden by default
  notFound.hide()
  
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase()
    
    // select all items
    var allItems = $("#myTable tr")
    
    // get list of matched items, (do not toggle them)
    var matchedItems = $("#myTable tr").filter(function() {
      return $(this).text().toLowerCase().indexOf(value) > -1
    });
    
    // hide all items first
    allItems.toggle(false)
    
    // then show matched items
    matchedItems.toggle(true)
    
    // if no item matched then show notFound row, otherwise hide it
    if (matchedItems.length == 0) notFound.show()
    else notFound.hide()
  });
});

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="myInput" type="text" placeholder="Search..">
<br><br>

<table>
  <thead>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Email</th>
  </tr>
  </thead>
  <tbody id="myTable">
  <tr id="notFound"><td colspan="3">Not Found</td></tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>Mary</td>
    <td>Moe</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>July</td>
    <td>Dooley</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>Anja</td>
    <td>Ravendale</td>
    <td>[email protected]</td>
  </tr>
  </tbody>
</table>

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating