js中搜索输入为空如何隐藏搜索结果？

问题描述 投票：0回答：1

现在，搜索结果通过 

CSS
默认隐藏/onload/onrefresh。仅当您在输入字段中搜索并按 Enter 键或按 按钮时，结果才会显示。例如，尝试搜索“社交”并按回车键，它将显示一项，然后删除输入字段中的文本并按回车键，结果应该被隐藏，因为输入字段为空。我怎样才能做到这一点？

这是代码：

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

javascript jquery keypress enter keyup
1个回答
0
投票

您可以在 if-else 块中再添加一项检查，如果输入值为空，则不显示卡片。

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.