Wie verstecke ich die Suchergebnisse, wenn die Sucheingabe leer ist? ⇐ Jquery

[Guest]

Die Suchergebnisse werden standardmäßig ausgeblendet/onload/onrefresh über CSS. Ergebnisse werden nur angezeigt, wenn Sie im Eingabefeld suchen und die Eingabetaste drücken oder wenn Sie auf die Schaltfläche klicken.
Versuchen Sie beispielsweise, „Social“ zu durchsuchen und drücken Sie die Eingabetaste. Dies wird angezeigt ein Element.
Wenn Sie dann den Text im Eingabefeld löschen und die Eingabetaste drücken, sollen die Ergebnisse ausgeblendet werden, da das Eingabefeld leer ist.
Wie kann ich das machen?

Code: Select all

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

}
});
}

Code: Select all

.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;
}

Code: Select all

Button




[h4]Social[/h4]
Social Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, ut.

[h4]Security[/h4]
Security Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto obcaecati eum reprehenderit qui deleniti pariatur suscipit labore. Veniam, magnam laboriosam.

[h4]System[/h4]
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.




No matching results.  Try changing your search terms.