How to hide the search results if the search input is empty?

Question

The search results are hidden by default/onload/onrefresh via CSS. Results will only shows up if you search in the input field and hit enter or if you hit the button.

For example try to search Social and hit enter, this will shows one item.

If you then delete the text in the input field and hit enter the results are supposed to be hidden because the input field is empty.

How can i do that?

$(function() {  
    $('.stores-search-not-found').hide();
    $(".stores-input-search").on('keyup', function (e) {
        if (e.key === 'Enter' || e.keyCode === 13) {
            e.preventDefault();
            const filter = $(this).val();
            search(filter);
        }
        
    });
    $('#cta-search-button').on('click', function (e) {
        const filter = $('#stores-input-search').val();
        search(filter);
    })
});

function search(filter){    
    var count = 0;
    if (count == 0) {
        $('.stores-search-not-found').hide();
    }
    $('.stores-search-lists .card').each(function() {
        if ($(this).text().search(new RegExp(filter, "i")) < 0) {
            $(this).hide(); 
            if (count == 0) {
                $('.stores-search-not-found').show();
            } else {
                $('.stores-search-not-found').hide();
            }         
        }        
        else {
            $(this).show(); 
            //$(this).css('display','block');
            count++;
            
        }
    });  
}

.stores-search-lists {
  font-size: 1rem;
}
.stores-search-lists .card {
  background-color:gray;
  padding: 1rem;
  margin: 1rem;
  color: white;
  display: none;
}
.stores-search-not-found {
  padding: 3rem 1rem;
}



/* =========================
   GENERAL STYLES 
   NOT RELATED TO THE DEMO
============================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {  
  --clr-primary: #ee6352;
  --clr-secondary: #d16e8d;
  --clr-accent: #F7F7FF;
  --clr-gradient: linear-gradient(-90deg, var(--clr-primary), var(--clr-secondary));
  --ff-title: bungee, sans-serif;
  --ff-body: canada-type-gibson,sans-serif;
  --fw-body: 300;
  --fw-bold: 800;
  --fw-title: 400;
  --fw-number: 800;
}

body {
  min-height: 100vh;
  font-family: var(--ff-body);
  font-weight: var(--fw-body);
  font-size: 1.25rem;
  padding: 0;
  margin: 0;
}

a {
  color: inherit;
}

a:hover,
a:focus {
  color: var(--clr-accent);
}

:focus {
  outline: 5px solid var(--clr-accent);
  outline-offset: 3px;
}

<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<div style="display: block;">
<!-- search input -->
  <input class="stores-input-search" type="text" id="stores-input-search" placeholder="Search for anything">
<button class="cta-search-button" id="cta-search-button">Button</button>

  <!-- list -->
  <div class="stores-search-lists">
      <div class="card">
        <h4>Social</h4>
        <p>Social Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, ut. </p>
      </div>
      <div class="card">
        <h4>Security</h4>
        <p>Security Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto obcaecati eum reprehenderit qui deleniti pariatur suscipit labore. Veniam, magnam laboriosam. </p>
      </div>
      <div class="card">
        <h4>System</h4>
        <p> System Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, repellat praesentium magnam quis repudiandae aliquam ipsum necessitatibus quas tempora in consectetur, quibusdam porro laudantium quisquam voluptas minima officia vitae natus. </p>
      </div>
  </div>


  <!-- feedback -->
  <div class="stores-search-not-found" aria-live="polite">No matching results. Try changing your search terms.</div>
  
  </div>

Answer 1

You can add one more check in the if-else block that if the input value is empty do not show the cards.

$(function() {  
    $('.stores-search-not-found').hide();
    $(".stores-input-search").on('keyup', function (e) {
        if (e.key === 'Enter' || e.keyCode === 13) {
            e.preventDefault();
            const filter = $(this).val();
            search(filter);
        }
        
    });
    $('#cta-search-button').on('click', function (e) {
        const filter = $('#stores-input-search').val();
        search(filter);
    })
});

function search(filter){    
    var count = 0;
    if (count == 0) {
        $('.stores-search-not-found').hide();
    }
    $('.stores-search-lists .card').each(function() {
        if ($(this).text().search(new RegExp(filter, "i")) < 0) {
            $(this).hide(); 
            if (count == 0) {
                $('.stores-search-not-found').show();
            } else {
                $('.stores-search-not-found').hide();
            }         
        }        
        else if(!filter){
            $(this).hide();
            
        } else {
            $(this).show(); 
            //$(this).css('display','block');
            count++;
        }
    });  
}

.stores-search-lists {
  font-size: 1rem;
}
.stores-search-lists .card {
  background-color:gray;
  padding: 1rem;
  margin: 1rem;
  color: white;
  display: none;
}
.stores-search-not-found {
  padding: 3rem 1rem;
}



/* =========================
   GENERAL STYLES 
   NOT RELATED TO THE DEMO
============================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {  
  --clr-primary: #ee6352;
  --clr-secondary: #d16e8d;
  --clr-accent: #F7F7FF;
  --clr-gradient: linear-gradient(-90deg, var(--clr-primary), var(--clr-secondary));
  --ff-title: bungee, sans-serif;
  --ff-body: canada-type-gibson,sans-serif;
  --fw-body: 300;
  --fw-bold: 800;
  --fw-title: 400;
  --fw-number: 800;
}

body {
  min-height: 100vh;
  font-family: var(--ff-body);
  font-weight: var(--fw-body);
  font-size: 1.25rem;
  padding: 0;
  margin: 0;
}

a {
  color: inherit;
}

a:hover,
a:focus {
  color: var(--clr-accent);
}

:focus {
  outline: 5px solid var(--clr-accent);
  outline-offset: 3px;
}

<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<div style="display: block;">
<!-- search input -->
  <input class="stores-input-search" type="text" id="stores-input-search" placeholder="Search for anything">
<button class="cta-search-button" id="cta-search-button">Button</button>

  <!-- list -->
  <div class="stores-search-lists">
      <div class="card">
        <h4>Social</h4>
        <p>Social Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, ut. </p>
      </div>
      <div class="card">
        <h4>Security</h4>
        <p>Security Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto obcaecati eum reprehenderit qui deleniti pariatur suscipit labore. Veniam, magnam laboriosam. </p>
      </div>
      <div class="card">
        <h4>System</h4>
        <p> System Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, repellat praesentium magnam quis repudiandae aliquam ipsum necessitatibus quas tempora in consectetur, quibusdam porro laudantium quisquam voluptas minima officia vitae natus. </p>
      </div>
  </div>


  <!-- feedback -->
  <div class="stores-search-not-found" aria-live="polite">No matching results. Try changing your search terms.</div>
  
  </div>