Autocomplete - Pfeiltasten.

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas
christian1603

christian1603 hat kostenlosen Webspace.
16:04, 21.10.2010
Hey @all,
Ich habe mit Ajax in meiner Suchmaschine Autocomplete eingebaut.
Momentan wird ein Suchbegriff vorgeschlagen und wenn man auf ihn klickt wird er ins Input Feld kopiert.
Nun möchte ich das man auch mit den Pfeiltasten zwischen den Vorschlägen auswählen kann.
Hat jemand ne Idee wie ich das machen kann?

Ausgabe:
```
<div id="alle Vorschläge">
<span id="1">Vorschlag 1</span>
<span id="2">Vorschlag 2</span>
<span id="3">Vorschlag 3</span>
</div>
```
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
ole-reglitzki

ole-reglitzki hat kostenlosen Webspace.
22:25, 21.10.2010
http://msdn.microsoft.com/de-de/library/bb980159%28VS.95%29.aspx

mit javascript:
erst einen Probelauf, wo du dir bei onkeydown die keyEventArgs.Key für Pfeiltasten und enter ausgeben lässt.
dann kannst du das rückgängig machen (Zahlen merken) und folgenden jscriptcode einbinden (am Ende der Seite)
```
var vorschlag = 1;

window.onkeydown = markermove;
function markermove(e)
{
  if(e.Key == PFEILOBEN && vorschlag != 1){
    document.getElementById(vorschlag).class = 'nicht_markiert';
    vorschlag --;
    document.getElementById(vorschlag).class = 'markiert';
  } else if(e.Key == PFEILUNTEN && vorschlag != ANZAHLDERVORSCHLAEGE){
    document.getElementById(vorschlag).class = 'nicht_markiert';
    vorschlag ++;
    document.getElementById(vorschlag).class = 'markiert';
  } else if(e.Key == ENTER){
    document.getElementById("DEINTEXTFELD").value = document.getElementById(vorschlag).value;
  }
}
```
ungetestet!
eventuell musst du noch nen event-Listener rein hauen, ich kenne mich mit jscript nicht soooo sehr aus!

EDIT: dann kannst du natürlich mit css die Felder span.markiert und span.nicht_markiert noch farbig unterlegen ;)

Beitrag zuletzt geändert: 21.10.2010 22:26:53 von ole-reglitzki

Autor dieses Themas

11:29, 22.10.2010

Danke Schonmal !!!
Ich habe mein Glück mal probiert aber es kam leider nix dabei raus:

<body onkeydown="markermove(event)">

<input type="text" id="feld">
<div id="vorschlag">
<span id="1">Vorschlag 1</span>
<span id="2">Vorschlag 2</span>
<span id="3">Vorschlag 3</span>
</div>
      <script>
var vorschlag = 1;
function markermove(e)
{
 

  if(e.Key == 40 && vorschlag != 1){
    document.getElementById(vorschlag).className = 'nicht_markiert';
    vorschlag --;
    document.getElementById(vorschlag).className = 'markiert';
  } else if(e.Key == 38 && vorschlag != 3){
    document.getElementById(vorschlag).className = 'nicht_markiert';
    vorschlag ++;
    document.getElementById(vorschlag).className = 'markiert';
  } else if(e.Key == 13){
    document.getElementById("feld").value = document.getElementById(vorschlag).value;
  }
}


</script>

Vielleicht kannst du oder wer anders der genau so cool is wie du mal drüber schauen :-)
LG

Beitrag zuletzt geändert: 22.10.2010 12:12:20 von christian1603

ole-reglitzki

ole-reglitzki hat kostenlosen Webspace.

14:08, 22.10.2010

du kannst mal nach

function markermove(e)
{

ein

alert('Funktion wird aufgerufen');

enfügen.
wenn dann beim Drücken einer Taste ein Meldefenster aufgerufen wird, liegt es am Code in der Funktion, ansonsten musst du noch nen Event-Listener einbauen, wie gesagt, mit dem kanne ich mich nicht so aus, daher kann ich dir jetzt nicht mit Sicherheit sagen, wie man einen solchen einbaut...
Aber ich vermute mal folgendes:

<body>

<input type="text" id="feld">
<div id="vorschlag">
<span id="1">Vorschlag 1</span>
<span id="2">Vorschlag 2</span>
<span id="3">Vorschlag 3</span>
</div>
<script language="JavaScript">
<!--
var vorschlag = 1;

window.AddEventListener("KeyDown", "markermove")

function markermove(sender, e)
{
  if(e.key == 40 && vorschlag != 1){
    document.getElementById(vorschlag).class = 'nicht_markiert';
    vorschlag --;
    document.getElementById(vorschlag).class = 'markiert';
  } else if(e.key == 38 && vorschlag != 3){
    document.getElementById(vorschlag).class = 'nicht_markiert';
    vorschlag ++;
    document.getElementById(vorschlag).class = 'markiert';
  } else if(e.key == 13){
    document.getElementById("feld").value = document.getElementById(vorschlag).value;
  }
}
//-->
</script>

falls das nicht funktioniert:
Bei Mozilla FF findest du unter 'Extras' eine Fehlerkonsole, die u. a. css, jevascript, etc. Fehler ausgibt.
Wenn du selbst dann aus den Fehlern nicht schlau wirst, einfach googlen und danach posten ;)

Beitrag zuletzt geändert: 22.10.2010 14:18:29 von ole-reglitzki

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city