Как показать список элементов после нажатия кнопки ⇐ Javascript

[Anonymous]

Попробуйте выполнить поиск «социальные сети» в поле ввода и нажмите Enter. Все работает нормально. Но мне нужна та же функциональность, если вы нажмете кнопку.
Я уже пробовал создать 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;
}

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

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 ... the-button