jquery add line with no results found

Question

$(document).ready(function(){
  $("#ltt").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#ltt tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
if (this[0]){
    "nothing found"
}
    });

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<input id="ltt" type="text" placeholder="Search..">
<br><br>
<table>
  <thead>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Birthday</th>
  </tr>
  </thead>
  <tbody id="ltt">
  <tr>
    <td>James</td>
    <td>Heier</td>
    <td>30 April 1983</td>
  </tr>
  <tr>
    <td>Sandro</td>
    <td>Key</td>
    <td>14 May 1986</td>
  </tr>
  </tbody>
</table>

i'm trying to add a line in case no match found, can you support me and tell me what i'm doing wrong? i put the whole query. Please find below the script thank you so much for your help and support

Please add a working live example. In the editor next to the image icon you can add your code. Don't forget to select jquery on the left side, so your example is working. — Christopher Dosin, May 06 '19 at 18:10
What is this supposed to do? `.filter()` returns a subset of the collection where the callback function returns a truthy value. You're not doing anything with the return value, and the callback function has no `return` statement. — Barmar, May 06 '19 at 18:15
IDs are supposed to be unique, so `$("#ltt")` will only select one element. Using `.filter()` with this doesn't make much sense. — Barmar, May 06 '19 at 18:17
Did you really intend to filter `#ltt`? That seems to be the input element, and `$(this).text()` won't return anything. — Barmar, May 06 '19 at 18:19
In addition to Barmar's comments, I recommend never using `this` or `$(this)` in jQuery code, as it makes the code very confusing when `this` refers to different things in nearby lines of code. Instead, use the explicit function parameters. Every event listener receives an `event` object, and `event.target` is the element that was clicked or otherwise received the event. `.filter()` receives an `index` and an `element`. And so on. — Michael Geary, May 06 '19 at 18:25
Thanks for the edit. One more thing you could do that is helpful is to make the HTML and JavaScript code into a "snippet". Look for the [<>] icon above the editor box; it will open a code editor where you can put in the HTML/JS/CSS code and actually run it. When you save from there, the snippet will become part of your question so other people can run it too. — Michael Geary, May 06 '19 at 18:29

score 0 · Accepted Answer · answered May 06 '19 at 18:52

I would use .each() instead of .filter() since you're not filtering an array but simply taking an action on each element. Also use the named parameters instead of this as I mentioned in a comment.

Finally, you can simply count how many elements end up being visible, and then hide or show the "nothing found" message as needed.

Also note that in your original code, the "nothing found" string would never up being displayed, because it is just a string in your JavaScript code and never makes it into the DOM.

Something along these lines should work. You will want to improve the presentation from my rough example, for example the table headers still appear and move around when "Nothing found" is shown. But it should give you some ideas of where to go from here:

$(document).ready(function(){
  $("#ltt").on("keyup", function(event) {
    var value = $(event.target).val().toLowerCase();
    var count = 0;
    $("#ltt tr").each(function(index, element) {
      var show = $(element).text().toLowerCase().indexOf(value) > -1;
      $(element).toggle(show);
      if( show ) {
        count++;
      }
    });
    $('#nothing').toggle( count === 0 );
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<input id="ltt" type="text" placeholder="Search..">
<br><br>
<table>
  <thead>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Birthday</th>
  </tr>
  </thead>
  <tbody id="ltt">
  <tr>
    <td>James</td>
    <td>Heier</td>
    <td>30 April 1983</td>
  </tr>
  <tr>
    <td>Sandro</td>
    <td>Key</td>
    <td>14 May 1986</td>
  </tr>
  </tbody>
</table>
<div id="nothing" style="display: none;">
    Nothing found
</div>

jquery add line with no results found

1 Answers1