Как скрыть результаты поиска, если поле поиска пусто? ⇐ Javascript

[Anonymous]

Результаты поиска скрыты по умолчанию/при загрузке/обновлении с помощью CSS. Результаты будут отображаться только в том случае, если вы выполните поиск в поле ввода и нажмете «Ввод» или нажмете кнопку.
Например, попробуйте выполнить поиск в социальных сетях и нажмите «Ввод», это отобразит один элемент.
Если вы затем удалите текст в поле ввода и нажмете «Ввод», результаты будут скрыты, поскольку поле ввода пусто.
Как я могу это сделать?

Код: Выделить всё

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

Код: Выделить всё

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.

Подробнее здесь: https://stackoverflow.com/questions/793 ... t-is-empty