Search code examples
javascriptjquerykeypressenter

How to show the list of items after clicking the button

Try to search "social" in the input field and hit enter, It is working fine. But I want the same functionality if you click the button.

I already tried creating a document.getElementById("cta-search-button").click(...); and calling it inside 'keyup' but no to avail.

$(function() {
  
  $('.stores-search-not-found').hide();
  $(".stores-input-search").on('keyup', function (e) {
    if (e.key === 'Enter' || e.keyCode === 13) {
      e.preventDefault();
      var filter = $(this).val();
      var count = 0;
      if (count == 0) {
        $('.stores-search-not-found').hide()
      }
      // Loop through the comment list
      $('.stores-search-lists .card').each(function() {
        // If the list item does not contain the text phrase fade it out
        if ($(this).text().search(new RegExp(filter, "i")) < 0) {
          $(this).hide(); // MY CHANGE
          if (count == 0) {
            $('.stores-search-not-found').show()
          } else {
            $('.stores-search-not-found').hide()
          }
          // Show the list item if the phrase matches and increase the count by 1
        } else {
          $(this).show(); // MY CHANGE
          count++;
        }
      });  
    }
    
  });
  
});
.stores-search-lists {
  font-size: 1rem;
}
.stores-search-lists .card {
  background-color:gray;
  padding: 1rem;
  margin: 1rem;
  color: white;
}
.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>

Solution

  • Just make the button a submit and use the submit event

    I also simplified the code

    $(function() {
  const $cards = $('.stores-search-lists .card').hide();
  const $notfound = $('.stores-search-not-found').hide();
  $("#searchform").on('submit', function(e) {
    e.preventDefault();
    const filter = $('#stores-input-search').val();
    let count = 0;
    $notfound.hide()
    // Loop through the comment list
    $cards
    .hide()
    .each(function() {
      // If the list item does not contain the text phrase fade it out
      const found = filter !== '' && $(this).text().search(new RegExp(filter, "i")) > -1;
      if (found) count++;
      $(this).toggle(found);
    });
    $notfound.toggle(filter !== '' && count === 0);
  });
  $('#stores-input-search').on('input', function() {
    if (this.value.trim() === '') {
      $notfound.hide();
    }
  })
});
    .stores-search-lists {
  font-size: 1rem;
}

.stores-search-lists .card {
  background-color: gray;
  padding: 1rem;
  margin: 1rem;
  color: white;
}

.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>
<form id="searchform">
  <div style="display: block;">
    <!-- search input -->
    <input class="stores-input-search" type="text" id="stores-input-search" placeholder="Search for anything" />
    <button type="submit" 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>
  </div>
</form>

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

    This one does not need jQuery and does not need the button either

    window.addEventListener('load', () => {
  const notFound = document.querySelector('.stores-search-not-found');
  const cards = document.querySelectorAll('.stores-search-lists .card');
  cards.forEach(card => card.hidden=true);
  notFound.hidden = true;
  document.getElementById('stores-input-search').addEventListener('input', (e) => {
    notFound.hidden = true;
    const filter = e.target.value.trim();
    let count = 0;
    cards.forEach(card => {
      const found = filter !== '' && card.textContent.search(new RegExp(filter, "i")) > -1;
      if (found) count++;
      card.hidden = !found;
    });
    const hide = (filter === '' || (filter !== '' && count !== 0));
    notFound.hidden = hide;
  });
});
    .stores-search-lists {
  font-size: 1rem;
}

.stores-search-lists .card {
  background-color: gray;
  padding: 1rem;
  margin: 1rem;
  color: white;
}

.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">
  <!-- 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" hidden>No matching results. Try changing your search terms.</div>