Webseite: HTML-Suchfeld erstellen um Inhalte auf der Seite zu suchen?

...komplette Frage anzeigen

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:


  1. Input-Feld und Suchlogik
  2. 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!

Chokii 13.07.2017, 23:02

Danke für die ausführliche Antwort :) Ja der Editor ist echt **.. hier.. Werde es mal ausprobieren!

0
MarcusCJ 14.07.2017, 02:40
@Chokii

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>
0

Was möchtest Du wissen?