So zeigen Sie die Liste der Elemente an, nachdem Sie auf die Schaltfläche geklickt haben ⇐ Jquery

[Guest]

Versuchen Sie, im Eingabefeld nach „sozial“ zu suchen und drücken Sie die Eingabetaste. Es funktioniert einwandfrei. Aber ich möchte die gleiche Funktionalität, wenn Sie auf die Schaltfläche klicken.
Ich habe bereits versucht, ein document.getElementById("cta-search-button").click(...); und rufe es innerhalb von „keyup“ auf, aber ohne Erfolg.

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();
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++;
}
});
}

});

});

Code: Select all

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

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.