M
McMoneysack91
Gast
Liebe Freunde,
ich versuche mal, mein Anliegen möglichst präzise zu formulieren.
Auf meiner in HTML/CSS geschriebenen Website möchte ich eine Suchfunktion in eine Artikelseite (ein Glossar, welches irgendwann SEHR lang sein wird) einfügen, die zunächst einmal NUR diese eine Seite abdeckt. Kein Seitenwechsel also. Ganz banal. Fast schon wie STRG+F im Browser. Einfach als Übung.
Die Suche soll aber schon etwas an die Hand nehmen. Das heißt ich arbeite mit festen Listenwerten, die beim Lostippen im Suchfeld schon passende Kandidaten auswerfen. Je weiter man tippt, desto weniger Kandidaten bleiben übrig. Man kann diesen dann einfach anklicken, der Kandidat wird komplett in das Suchfeld übertragen und fertig. Der User bräuchte nur noch das GO oder Lupensymbol anklicken.
Info: Bis hierhin habe ich es erfolgreich bewerkstelligt mit...
Problem 1: Diese Suchvorschläge werden schon beim bloßen Anklicken des noch leeren Suchfeldes unter dem Suchfeld als Kartei ausgefahren. Wenn ich mir überlege, da hunderte oder tausende Einträge zu haben, wirds hässlich! Ich möchte, dass das Suchfeld auch nach dem Anklicken noch nichts auswirft, sondern erst wenn der erste Wert eingetippt wird.
Problem 2: Wie bewerkstellige ich, dass der Search-Button mich auch tatsächlich zum passenden Absatz bringt? Jeder Absatz ist mit einer entsprechenden <a id="..."></a> ausgestattet und kann mittels <a href="#..."></a> referenziert werden. Das tue ich ohnehin gerne, da ich gerne mit Kreuzverweisen arbeite. Wie kriege ich es hin, dass der Search-Button den Wert aus dem Suchfeld nimmt und zur passenden ID führt?
Müsste ich beim <button></button> einen <a href="#..."> Befehl einbauen und bei den <option value> Einträgen entsprechende Variablen? Sodass der Klick auf den Search-Button im Grunde sagt: "Lieber Button, a href mich bitte zu der ID hier auf der Seite, die der ID im gerade eingegebenen Eintrag im Suchfeld entspricht."
Ich stelle mir in etwa sowas vor:
Info: Ich möchte es NOCH tunlichst vermeiden, da mit JavaScript oder PHP Datenbanken zu arbeiten. Ich hoffe sehr, es lässt sich mit HTML bewerkstelligen.
ich versuche mal, mein Anliegen möglichst präzise zu formulieren.
Auf meiner in HTML/CSS geschriebenen Website möchte ich eine Suchfunktion in eine Artikelseite (ein Glossar, welches irgendwann SEHR lang sein wird) einfügen, die zunächst einmal NUR diese eine Seite abdeckt. Kein Seitenwechsel also. Ganz banal. Fast schon wie STRG+F im Browser. Einfach als Übung.
Die Suche soll aber schon etwas an die Hand nehmen. Das heißt ich arbeite mit festen Listenwerten, die beim Lostippen im Suchfeld schon passende Kandidaten auswerfen. Je weiter man tippt, desto weniger Kandidaten bleiben übrig. Man kann diesen dann einfach anklicken, der Kandidat wird komplett in das Suchfeld übertragen und fertig. Der User bräuchte nur noch das GO oder Lupensymbol anklicken.
Info: Bis hierhin habe ich es erfolgreich bewerkstelligt mit...
<form action="#">
<p>
<label>
Entries
<input type="search" id="search" placeholder="Search..." list="Entries">
<datalist id="Entries">
<option value="Entry1">
<option value="Entry2">
</datalist>
</label>
<button>Search</button>
</p>
</form>Problem 1: Diese Suchvorschläge werden schon beim bloßen Anklicken des noch leeren Suchfeldes unter dem Suchfeld als Kartei ausgefahren. Wenn ich mir überlege, da hunderte oder tausende Einträge zu haben, wirds hässlich! Ich möchte, dass das Suchfeld auch nach dem Anklicken noch nichts auswirft, sondern erst wenn der erste Wert eingetippt wird.
Problem 2: Wie bewerkstellige ich, dass der Search-Button mich auch tatsächlich zum passenden Absatz bringt? Jeder Absatz ist mit einer entsprechenden <a id="..."></a> ausgestattet und kann mittels <a href="#..."></a> referenziert werden. Das tue ich ohnehin gerne, da ich gerne mit Kreuzverweisen arbeite. Wie kriege ich es hin, dass der Search-Button den Wert aus dem Suchfeld nimmt und zur passenden ID führt?
Müsste ich beim <button></button> einen <a href="#..."> Befehl einbauen und bei den <option value> Einträgen entsprechende Variablen? Sodass der Klick auf den Search-Button im Grunde sagt: "Lieber Button, a href mich bitte zu der ID hier auf der Seite, die der ID im gerade eingegebenen Eintrag im Suchfeld entspricht."
Ich stelle mir in etwa sowas vor:
<form action="#">
<p>
<label>
Entries
<input type="search" id="search" placeholder="Search..." list="Entries">
<datalist id="Entries">
<a href="#Entry1"><option value="Entry1"></a>
<a href="#Entry2"><option value="Entry2"></a>
</datalist>
</label>
<a href="#active"><button>Search</button></a>
</p>
</form>Info: Ich möchte es NOCH tunlichst vermeiden, da mit JavaScript oder PHP Datenbanken zu arbeiten. Ich hoffe sehr, es lässt sich mit HTML bewerkstelligen.
Zuletzt bearbeitet von einem Moderator:
Kann das wirklich so stimmen? Habe eher gehofft, dass da ein kleiner 3-Zeiler reicht.
