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 class="no-results"></div>
<br />
<div class="record">Now is the time for all good men to come to the aid of their city</div>
<div class="record">Now is the time for all good women to come to the aid of their country</div>
<div class="record">Now is the time for all droids to come to the aid of their universe</div>
<div class="record">Now is the time for all fluffy bears to come to the aid of their wilderness</div>
<div class="record">Now is the time for all short people to come to the aid of their county</div>