点击按钮后如何显示项目列表

Question

尝试在输入字段中搜索“social”并按回车键，它工作正常。但如果您单击按钮，我想要相同的功能。

我已经尝试创建一个

document.getElementById("cta-search-button").click(...);

并在

'keyup'

中调用它，但没有成功。

$(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>

Answer 1

您没有在单击按钮时调用该函数。 您创建的函数是通用函数，它仅检查 keyup 输入值。

您应该创建一个函数，该函数将在搜索按钮的

click

以及 Enter 按键上调用。