20. August 2023
jQuery „Live-Suche“ – So kannst du Elemente auf einer Website durchsuchen und nicht passende Ergebnisse ausblenden.
Mit folgendem jQuery-Script kannst du eine „Live-Suche“ oder eine Filterfunktion auf einer Website umsetzen. Sobald etwas im Suchfeld eingetippt wird, werden alle nicht-passenden Elemente ausgeblendet.
<script>
jQuery.expr[":"].contains = jQuery.expr.createPseudo(function(arg) {
return function(elem) {
return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
jQuery('#search').on( "keyup", function() {
var query = jQuery('#search').val();
jQuery('details').addClass('d-none');
jQuery('.container').find("details:contains(" + query + ")").removeClass('d-none');
});
</script>Code-Sprache: HTML, XML (xml)Hier kannst du das Skript an Hand einer (fiktiven) FAQ für ein Hotel ausprobieren:
Wie kann ich eine Reservierung vornehmen?
Sie können online über unsere Website oder telefonisch über unsere Buchungshotline eine Reservierung vornehmen.
Gibt es Parkmöglichkeiten?
Ja, wir bieten kostenpflichtige Parkplätze für unsere Gäste an.
Gibt es WLAN im Hotel?
Ja, wir bieten kostenloses WLAN in allen Bereichen des Hotels.
Welche Check-in und Check-out Zeiten gelten?
Der Check-in ist ab 15:00 Uhr möglich, und der Check-out sollte bis 11:00 Uhr erfolgen.
Sind Haustiere erlaubt?
Leider erlauben wir keine Haustiere in unserem Hotel.
Gibt es ein Restaurant im Hotel?
Ja, wir haben ein hauseigenes Restaurant, das Frühstück, Mittag- und Abendessen serviert.
Bietet das Hotel einen Shuttleservice zum Flughafen an?
Ja, wir bieten einen Flughafentransfer gegen eine zusätzliche Gebühr an. Bitte kontaktieren Sie uns im Voraus.
Gibt es einen Fitnessraum?
Ja, wir verfügen über einen gut ausgestatteten Fitnessraum, der unseren Gästen zur Verfügung steht.
Bietet das Hotel Tagungsräume für Geschäftstreffen an?
Ja, wir bieten moderne Tagungsräume für Geschäftstreffen und Veranstaltungen an. Bitte kontaktieren Sie unsere Eventabteilung für weitere Informationen.
Wie kann ich zusätzliche Annehmlichkeiten wie Blumenservice oder Zimmerdekorationen arrangieren?
Sie können diese Anfragen direkt beim Reservierungsteam stellen oder uns im Voraus kontaktieren. Wir helfen Ihnen gerne dabei, Ihren Aufenthalt besonders zu gestalten.
Das komplette Skript:
<style>
details {
margin-bottom: 10px;
}
summary {
cursor: pointer;
}
details p {
margin-left: 16px;
}
details[open] summary {
font-weight:bold;
}
</style>
<div class="input-group pt-2 pb-4">
<i class="fa fa-search" style="position:absolute; left:13px; top:18px; z-index:10;"></i>
<input type="search" class="form-control" aria-label="Large" id="search" style="border:0; border-radius:0; padding-left:45px; border:1px solid #ccc;">
</div>
<div class="faq">
<details>
<summary>Frage</summary>
<p>Antwort</p>
</details>
<details>
<summary>Frage</summary>
<p>Antwort</p>
</details>
<!-- ... ->
</div>
<script>
jQuery.expr[":"].contains = jQuery.expr.createPseudo(function(arg) {
return function(elem) {
return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
jQuery('#search').on( "keyup", function() {
var query = jQuery('#search').val();
jQuery('details').addClass('d-none');
jQuery('.container').find("details:contains(" + query + ")").removeClass('d-none');
});
</script>Code-Sprache: HTML, XML (xml)Nächster Artikel