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!
