M
McMoneysack91
Gast
So, ich habe mich mal bei W3Schools bedient und zwar hier: https://www.w3schools.com/howto/howto_js_filter_dropdown.asp
Diese Suchfunktion kommt meinem Wunsch am nächsten. Was ich NICHT brauche ist dieser Dropdown Button. Daher habe ich den Code aus W3Schools etwas modifiziert und mir eine kleine Test-Seite gebaut, deren Quellcode ich hier veröffentliche. Ich bin schon zu 90% da.
Erklärung:
Ich habe eine (potentiell) elendig lange Seite mit zigtausenden Einträgen (z.B. ein Glossar) und jede Überschrift ist eine eigene id, die von der Suchfunktion mittels a href angesteuert werden kann. Die Suchvorschläge sind dabei anklickbar und leiten den Anwender direkt runter zum passenden Kapitel (Bravo, exakt so wollte ich es haben).
So lang die Seite jedoch wird, so viele Suchvorschläge sind auch anzufertigen. In der jetzigen Konstellation, wie ich sie gepostet habe, sind sie noch alle gleichzeitig sichtbar und stehen blöd nebeneinander. Beim Tippen werden dann die nicht passenden Begriffe weggefiltert bis nur noch einige zutreffende stehen bleiben. Das sind jetzt nur eine Hand voll Begriffe, aber was wenn ich da mehrere 100e oder 1000e habe.
Mein Wunsch richtet sicht nun vermutlich an die CSS. Wie bei Navigationsleisten mit Unterpunkten möchte ich, dass alle Begriffe zunächst unsichtbar sind und erst beim Tippen schon die passenden ausgeworfen werden.
Ich verweise hier nochmal an die Suchfunktion von https://www.canon.de/support/ wo man beim Tippen schon die passenden Begriffe bekommt. Kriegt man das mittels CSS noch elegant hin? Ich habe einige der Methoden aus meiner Nav versucht wie
position: absolute
z-index: -999em;
etc aber noch nicht ins Schwarze getroffen.
Diese Suchfunktion kommt meinem Wunsch am nächsten. Was ich NICHT brauche ist dieser Dropdown Button. Daher habe ich den Code aus W3Schools etwas modifiziert und mir eine kleine Test-Seite gebaut, deren Quellcode ich hier veröffentliche. Ich bin schon zu 90% da.
Code:
<!DOCTYPE html>
<html lang="de">
<body>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
<a href="#apfel">Apfel</a>
<a href="#birne">Birne</a>
<a href="#clementine">Clementine</a>
<a href="#dattel">Dattel</a>
<a href="#erdbeere">Erdbeere</a>
<a href="#feige">Feige</a>
<a href="#grapefruit">Grapefruit</a>
<a href="#haselnuss">Haselnuss</a>
<a href="#ingwer">Ingwer</a>
<a href="#johannisbeere">Johannisbeere</a>
<a href="#kiwi">Kiwi</a>
<a href="#limette">Limette</a>
</div>
<p><b><a id="apfel">Apfel</a></b></p>
<p>Dieser Abschnitt befasst sich mit Äpfeln.</p>
<br>
<p><b><a id="birne">Birne</a></b></p>
<p>Dieser Abschnitt befasst sich mit Birnen.</p>
<br>
<p><b><a id="clementine">Clementine</a></b></p>
<p>Dieser Abschnitt befasst sich mit Clementinen.</p>
<br>
<p><b><a id="dattel">Dattel</a></b></p>
<p>Dieser Abschnitt befasst sich mit Datteln.</p>
<br>
<p><b><a id="erdbeere">Erdbeere</a></b></p>
<p>Dieser Abschnitt befasst sich mit Erdbeeren.</p>
<br>
<p><b><a id="feige">Feige</a></b></p>
<p>Dieser Abschnitt befasst sich mit Feigen.</p>
<br>
<p><b><a id="grapefruit">Grapefruit</a></b></p>
<p>Dieser Abschnitt befasst sich mit Äpfeln.</p>
<br>
<p><b><a id="haselnuss">Haselnuss</a></b></p>
<p>Dieser Abschnitt befasst sich mit Haselnüssen.</p>
<br>
<p><b><a id="ingwer">Ingwer</a></b></p>
<p>Dieser Abschnitt befasst sich mit Ingwer.</p>
<br>
<p><b><a id="johannisbeere">Johannisbeere</a></b></p>
<p>Dieser Abschnitt befasst sich mit Johannisbeeren.</p>
<br>
<p><b><a id="kiwi">Kiwi</a></b></p>
<p>Dieser Abschnitt befasst sich mit Kiwis.</p>
<br>
<p><b><a id="limette">Limette</a></b></p>
<p>Dieser Abschnitt befasst sich mit Limetten.</p>
<br>
</body>
</html>
<style>
</style>
<script>
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
</script>Erklärung:
Ich habe eine (potentiell) elendig lange Seite mit zigtausenden Einträgen (z.B. ein Glossar) und jede Überschrift ist eine eigene id, die von der Suchfunktion mittels a href angesteuert werden kann. Die Suchvorschläge sind dabei anklickbar und leiten den Anwender direkt runter zum passenden Kapitel (Bravo, exakt so wollte ich es haben).
So lang die Seite jedoch wird, so viele Suchvorschläge sind auch anzufertigen. In der jetzigen Konstellation, wie ich sie gepostet habe, sind sie noch alle gleichzeitig sichtbar und stehen blöd nebeneinander. Beim Tippen werden dann die nicht passenden Begriffe weggefiltert bis nur noch einige zutreffende stehen bleiben. Das sind jetzt nur eine Hand voll Begriffe, aber was wenn ich da mehrere 100e oder 1000e habe.
Mein Wunsch richtet sicht nun vermutlich an die CSS. Wie bei Navigationsleisten mit Unterpunkten möchte ich, dass alle Begriffe zunächst unsichtbar sind und erst beim Tippen schon die passenden ausgeworfen werden.
Ich verweise hier nochmal an die Suchfunktion von https://www.canon.de/support/ wo man beim Tippen schon die passenden Begriffe bekommt. Kriegt man das mittels CSS noch elegant hin? Ich habe einige der Methoden aus meiner Nav versucht wie
position: absolute
z-index: -999em;
etc aber noch nicht ins Schwarze getroffen.
