Heutzutage liefert man Suchergebnisse gerne mithilfe von dynamischen Elementen aus. Zum Beispiel mit einem Akkordion-Effekt, bei dem per Javascript oder in folgendem mit JQuery gelöst, das Ergebnis wie ein Akkordion aufschiebt. Wie man das ganz einfach lösen kann, zeige ich hier.
So sieht das Ergebnis aus: https://www.netz-gaenger.de/snippets/akkordion.php
Und so wirds gemacht…
1. Zuerst bindet man eine JQuery-Version im <head>-Bereich ein. Zum Beispiel so:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
2. Dann erstellt man eine Funktion zum Öffnen des Akkordions. Abhängig vom Suchbegriff wird das Div mithilfe des Befehls .slideToggle(„slow“) langsam eingeschoben, welches den gleichen Klassennamen besitzt, wie der Suchbegriff lautet. Groß- und Kleinschreibung wird gleich behandelt.
<script type="text/javascript">
function oeffnen(suchwert){
$('#content > div').hide();
$("."+suchwert.toLowerCase()).slideToggle("slow");
}
</script>
3. Anschließend erstellt man ein kleines Formular um die Suchergebnisse abzufangen und per onclick-Handler an die Javascript-Klasse weiterzugeben.
Zu suchenden Begriff hier eingeben: <input type="text" id="suche" name="suche" /><br />
(Hier sind die Suchbegriffe "München" und "Stuttgart" möglich.)<br />
<a class="open-close" href="#" onclick="oeffnen($('#suche').val())">Open / Close</a>
<div id="content">
<div class="münchen">
<p>münchen: Dein Inhalt kommt hier rein...</p>
</div>
<div class="stuttgart">
<p>stuttgart: Dein Inhalt kommt hier rein...</p>
</div>
</div>
Das war es auch schon…
Kai
Ich kann meinen Vorredner nur zustimmen, toller Effekt! Danke für den fertigen Code!
LG Kai
Grafiker Kevin
Tach, erst einmal, sehr schöner Blog und tolles Webdesign…:) ich habe deinen Blog auf meiner aktuellen DoFollow Blogliste Oktober 2013 unter http://www.kreativmoneten.de/dofollow-blog-liste-stand-oktober-2013/ eingetragen 🙂 Ich hoffe das ist in Ordnung 🙂 p.s. Natürlich würde ich mich über einen Kommentar auf meinem Blog freuen 🙂 Liebe Grüße vom Bodensee Kevin
Silvester Jamsen
Danke für den tollen Effekt.
Vorallem Super das du immer den fertigen Code zur Verfügung stellst, da muss ich meinem Vorredner zustimmen.
Viel Ahnung habe ich von jQuery noch nocht, aber von JavaScript schon ein wenig, da werd ich mich bestimmt reinfuchsen können.
LG
Sicherheitstechnik Berlin
Sehr schicker Effekt! Kann sich echt sehen lassen!
Vielen Dank für den Quellcode, jetzt hat sich das jQuery lernen doch noch bezahlt gemacht 😛
Grüße Jan