jQuery text search - how do I show a "No results" div when using an if else conditional?-CodePudding

I'm working on a "live" text search in the html on a page using jQuery.

The function below works as a "live" search, when a minimum of three characters is entered to start the search.

$('#search').keyup(function() {
    var text = $(this).val().trim();
    var minLength = 2;
    $('.record.active').removeClass("active");
    if (!text.length) return;
    if (text.length > minLength)
    $('.record').each(function() {
      if ($(this).text().toLowerCase().includes(text)) {
        $(this).addClass("active");
      }
    });

But what I want to do is show "No results" when there are no results. I'm trying to use an if else statement to determine if there are any records with the active class. But function in the snippet below doesn't work; it simply shows "No ResultsNo ResultsNo ResultsNo Results...." with no search results.

 $('#search').keyup(function() {
    var text = $(this).val().trim();
    var minLength = 2;
    $('.record.active').removeClass("active");
    if (!text.length) return;
    if (text.length > minLength)
    $('.record').each(function() {
      if ($(this).text().toLowerCase().includes(text))
        $(this).addClass("active");
        else
        $('.record').not("active");
        $(".no-results").append("No Results");
    
    });
  });

.record {
display: none;
}

.record.active {
display: block;
}

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

Search <input type='text' id='search' placeholder='Search Text'>

<br />

<div ></div>

<br />

<div >Now is the time for all good men to come to the aid of their city</div>
<div >Now is the time for all good women to come to the aid of their country</div>
<div >Now is the time for all droids to come to the aid of their universe</div>
<div >Now is the time for all fluffy bears to come to the aid of their wilderness</div>
<div >Now is the time for all short people to come to the aid of their county</div>

CodePudding user response：

You should use curly braces around your if statements to increase code readability.

To handle the no result case, you could show/hide a div depending on the number of records having the active class :

$('#search').keyup(function() {
    var text = $(this).val().trim();
    var minLength = 2;
    $('.record.active').removeClass("active");
    if (!text.length) return;
    if (text.length > minLength)
    $('.record').each(function() {
      if ($(this).text().toLowerCase().includes(text)) {
        $(this).addClass("active");
      }
      if($('.record.active').length){
        $(".no-results").hide();
      } else {
        $(".no-results").show();
      }
    });
  });

.record {
display: none;
}

.record.active {
display: block;
}

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

Search <input type='text' id='search' placeholder='Search Text'>

<br />

<div >No results</div>

<br />

<div >Now is the time for all good men to come to the aid of their city</div>
<div >Now is the time for all good women to come to the aid of their country</div>
<div >Now is the time for all droids to come to the aid of their universe</div>
<div >Now is the time for all fluffy bears to come to the aid of their wilderness</div>
<div >Now is the time for all short people to come to the aid of their county</div>