Webseite: HTML-Suchfeld erstellen um Inhalte auf der Seite zu suchen?
Hallo!
Ich möchte für meine Webseite ein Suchfeld erstellen. Es ist eine Art Rangliste, die aber über 100 Personen beinhaltet. Damit die Besucher ihren Namen leichter finden, möchte ich so eine kleine Suchleiste hinzufügen. Es soll halt so ähnlich, wie das CTRL + F System sein. Gibt es das und wenn ja hätte jemand so einen HTML-Code?
Danke im Voraus!
1 Antwort
Hallo!
Für die Lösung des Problemes werde ich die Javascript-Bibliothek jQuery verwenden, binde daher bitte diese Bibliotek als Script in dein Projekt ein, falls du sie noch nicht verwendest.
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
Diese Suchfunktion besteht aus zwei Komponenten:
- Input-Feld und Suchlogik
- Suchdatenmenge
Input-Feld und Suchlogik
Zu aller erst brauchst du ein Inputfeld und einen Button, der die Suche triggert. Das erzeugt man mit HTML wie folgt:
<input type="text" id="search"><button onclick="doSearch()">Suchen!</button>
Der Button wird bei einem "onclick"-Event die Methode doSearch() auslösen. Diese Methode müssen wir nun definieren. Sie wird uns das Suchergebnis anzeigen.<script>//Methodenkopffunction doSearch(){
//erhalten des gesuchten Wertes aus dem input-Feld var searchValue =
jQuery("#search").val(); //verarbeiten des Suchwertes, um Fehler
vorzubeugen //Großbuchstaben werden durch Kleinbuchstaben ersetzt var
searchValue=searchValue.toLowerCase(); //Leerzeichen durch
Bindestriche ersetzen var searchValue=searchValue.replace(" ","-");
//alle Einträge in der Suchliste ausblenden
jQuery(".searchentry").hide(); //gesuchten Eintrag in der Suchliste
einblenden jQuery('*[data-search="'+searchValue+'"]').show();
//FERTIG!}</script>
Nun noch die Daten als durchsuchbare Liste aufschreiben. WIchtig hierbei:
Es gibt den Display-Part in der List und es gibt den Datenhaltungspart.
Der Displaypart enthält Groß- und Kleinschreibung mit Leerzeichen, der Datenhaltungspart ist ausschießlich klein geschreiben und enthält statt Leerzeichen Bindestriche.
<div id="container"><!-- Für jeden Namen machst du so einen Eintrag --> <div class="searchentry" data-search="willy-bert"> Willy Bert </div><!-- Eintrag ende --> <div class="searchentry" data-search="manfred-huber"> Manfred Huber </div> <div class="searchentry" data-search="trixie-schnack"> Trixie Schnack </div><!--#container ENDE--><div>
Fertig ist deine Suche.
Viel Spaß beim Einpflegen ;)
PS: Dieser Editor funktioniert ja mal überhaupt nicht!
Ich sehe gerade, dass mir der editor bei den Code-Blöchen die Zeilenumbrüche gelöscht hat. Daher hier nochmal der Code mit anderen Kommentaren, um fehlerhafte Linebreaks zu eliminieren
<script>/*Methodenkopf*/
function doSearch(){
/*erhalten des gesuchten Wertes aus dem input-Feld */
var searchValue = jQuery("#search").val();
/*verarbeiten des Suchwertes, um Fehler vorzubeugen */
/*Großbuchstaben werden durch Kleinbuchstaben ersetzt */
searchValue=searchValue.toLowerCase();
/*Leerzeichen durch Bindestriche ersetzen */
searchValue=searchValue.replace(" ","-");
/*alle Einträge in der Suchliste ausblenden */
jQuery(".searchentry").hide();
/*gesuchten Eintrag in der Suchliste einblenden */
jQuery('*[data-search="'+searchValue+'"]').show();
/*FERTIG!*/
}</script>
Danke für die ausführliche Antwort :) Ja der Editor ist echt **.. hier.. Werde es mal ausprobieren!