Suchfeld mit AJAX

von **Fr4nk** am 24.01.2012, 02:25

Hallo,

gibt es eine Möglichkeit mit der Pfeilunten Taste in das Suchfeld zu kommen?

Frank

von **Guillermo** am 24.01.2012, 02:54

Hi Frank,

hast du schon ein Suchfeld ? Wenn ja welches verwendest du oder hast du selbst eins geschrieben? Können wir den Quelltext sehen? Gehn tut es auf jeden Fall.

Viele Grüße,
Guillermo

von **Fr4nk** am 24.01.2012, 04:29

Hallo,

ja ich habe das Tutorial von dieser Seite benutzt.

von **Guillermo** am 24.01.2012, 17:38

Hi Frank,

prinzipiell geht das so:
Sobald jemand einen Suchbegriff eingibt und die Liste mit den Vorschlaegen geladen wurde, dann musst du erstmal die Tastendruecke abfangen koennen. das geht mittels Events. Du kannst angeben was bei einer bestimmten Aktion, in unserem Fall einem beliebigen Tastendruck passieren soll. Danach kannst du die Tastendruecke herausfiltern die dich interessieren. Ich habe dir mal ein kleines Beispielprogramm erstellt dass die Vorgehensweise verdeutlichen soll und dass du noch erweitern kannst:

Code: Alles auswählen: <html> <head> <title>Javascript - Tastenerkennungstest</title> <script type="text/javascript"> function initKeyRecognition() { document.onkeypress = function(event) { if(!event) { event = window.event; } key = event.keyCode; switch(key) { //Up arrow was pressed case 38: markPreviousElement(); break; //Down arrow was pressed case 40: markNextElement(); break; case 13: //Set field with content document.getElementById("...").innerHTML = ""; //Stop key recognition stopKeyRecognition(); break; } } } function stopKeyRecognition() { document.onkeypress = function() { } } function markNextElement() { //... } function markPreviousElement() { //... } window.onload = function() { setTimeout("initKeyRecognition();",500); } </script> </head> <body>

Du musst dich jetzt um die Implementierung der Funktionen "markNextElement()" und "markPreviousElement()" kuemmern. Dazu solltest du dir merken welches Element aktuell hervorgehoben ist und bei Bedarf das vorherige und das naechste Element auslesen und diese enstprechend der Funktion zu markieren.
Ausserdem musst du beim Druecken der Entertaste (Key-Code #13) den Inhalt deines Suchfeldes setzten und vielleicht auch noch die Liste mit den Vorschlaegen wieder verstecken.

Zum Nachlesen: Javascriptevents: keyCode (SelfHTML)
Fuer das finden des naechsten oder vorherigen Elements sicher auch Hilfreich: Node-Objekt (SelfHTML), Falls du dich für die jQuery Variante entschieden hast könnte dich dieser Teil der jQuery Dokumentation interessieren: jQuery Traversing und jQuery: Tastatur events

Viele Gruesse,
Guillermo

Suchfeld mit AJAX

Suchfeld mit AJAX

Re: Suchfeld mit AJAX

Re: Suchfeld mit AJAX

Re: Suchfeld mit AJAX

Wer ist online?