keyevents ved liste

Hej,

Jeg har forsøgt mig med en dynamisk 'suggest' funktion, som også fungere fint. Men nu kunne jeg godt tænke mig at man kunne benytte relevante keyboardtaster for at navigere i de returnede resultater. Jeg har selv prøvet lidt, men må indrømme at jeg ikke lige kan få det til at spille. Håber nogen herinde måske er i stand til at hjælpe.

Derudover, er det så muligt at en kunne give et eksempel på hvorledes man pauser søgningen på servern, således at den først starter efter man ikke har rørt tastaturet i et sekund eller lign. Ellers så køre query'et jo konstant, hvilket vel kan blive lidt voldsomt for serveren.

<script type="text/javascript" language="JavaScript">
<!--
var xmlhttp = false;//XMLhttp variabel som holder XMLHttpRequest objektet

if (window.XMLHttpRequest) {//Hvis Mozilla,Firefox,Safari etc.
  xmlhttp = new XMLHttpRequest();
  xmlhttp.overrideMimeType('text/xml');
} else if (window.ActiveXObject) {//Hvis IE
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

function suggest(input, result) {//'input' = formfelt, 'result' = div hvor resultater er vist
  result = document.getElementById(result);
 
  if(input.value !== "") { //Hvis input er udfyldt, spørg script, behandl resultater
    result.innerHTML = "Søger...";
    var url = 'ajax.php?q=' + input.value;//url til script + input værdi
   
    xmlhttp.open('GET', url, true);//'true' = Åbner asynkront, 'GET' = metode, 'url'=script
   
    xmlhttp.onreadystatechange = function() {//Tjek at resultatet er færdigsendt
      if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        sortResults (xmlhttp.responseText, input, result)//Fyld resultat-div
      } else {
        result.innerHTML = 'Fejl!';//Hvis fejl eller manglende svar
      }
    };
  xmlhttp.send(null);
  }
}

function sortResults (string, input, result) {
  // splitter streng til key->value par
  var matches = string.length > 0 ? string.split('||') : [];
  for (i in matches) {
    matches[i] = matches[i].length > 0 ? matches[i].split('|') : [];
  }
  while (result.hasChildNodes()) { result.removeChild(result.childNodes[0]);}//Hvis der allerede er childs, så fjerne vi dem
  var ul = document.createElement('ul');
      ul.setAttribute('id','list');
  if (matches.length > 0) {
    for (i in matches) {
      li = document.createElement('li');
      div = document.createElement('div');
      div.innerHTML = matches[i][1];
      li.appendChild(div);
      li.autocompleteValue = matches[i][0];
      li.onmousedown = function() { select(this, input, result); };
      li.onmouseover = function() { highlight(this); };
      li.onmouseout  = function() { unhighlight(this); };
      ul.appendChild(li);
    }
    result.style.display = 'block';//Vis resultat div
    result.appendChild(ul);//Fyld resultater
  }
}

function select(node, input, result) {
  input.value = node.autocompleteValue;//Flyt værdi til tekstboks
  result.style.display = 'none';//Skjul resultat boks
}

function highlight(node) {
  node.className = 'selected';//Sæt class selected
}

function unhighlight(node) {
  node.className = '';//Fjern class selected
}

</script>

<form action="/test/index.php" method="post">
<label for="query"><strong>Search:</strong>&nbsp;<input type="text" name="query" id="query" onKeyUp="suggest(this, 'result')" /></label>&nbsp;
<input type="submit" name="done" value="Search Now">
</form>
<div id="result"></div


På forhånd mange tak