Autovervollständigung per Ajax+per Pfeiltasten auswählen können

[Peter]

Hallo.

Also ich habe ein Dynamisches Input-Feld.
Man gibt etwas ein und nach jedem Tastenschlag holt er sich vorschläge aus der Datenbank.

Das sieht so aus:

Kategorie: <input type='text' onkeyup=\"showCats(this.value);\" id='Category' name='category' />  
<ul id='Categories'></ul>  

In <ul id='Categories'></ul> werden dann <li> 's mit Kategorievorschlägen eingefügt.

Nun muss der Nutzer aus den Vorschlägen eine auf eine Kategorie klicken damit diese im Felderscheinen.

Wenn ich das bei google mache kann ich aber mit Pfeil-hoch/runter durch die Vorschläge durchnavigieren ohne das ich die Maus in die Hand nehmen muss und per Enter bestätigen.

Wie setze ich das um?
Ich weiß echt nicht wie =/

Grüße,

peter

[3d]

Für die Navigation mit Peile Taste mußt du eine methode nach einem Pfeil-Event aufrufen, der die div Schilder (highlighted) Vorschlag markiert

Hier ein Class dafür, vielleicht hilft dir weiter.

  
function $(id) { return document.getElementById(id); }  
function AutoSuggest(){  
var me = this;  
 //Hier mußte du deine Id eingeben  
var elem = $("sbi");  
 //Hier Anzahl von Suchvorschläge, nach ajax aufruf  
var states = new Array(10);  
  
var Ro =0;  
this.elem = elem;  
this.suggestions = states;  
this.eligible = new Array();  
this.inputText = null;  
this.highlighted = -1;  
this.div = $("autosuggest");  
var TAB = 9;  
var ESC = 27;  
var KEYUP = 38;  
var KEYDN = 40;  
var ENTER = 13;  
elem.onkeydown = function(ev)  
{  
var key = me.getKeyCode(ev);  
switch(key)  
{  
case TAB:  
me.useSuggestion();  
break;  
case ESC:  
me.hideDiv();  
break;  
case KEYUP:  
if (me.highlighted > 0)  
{  
me.highlighted--;  
}  
me.changeHighlight(key);  
break;  
case KEYDN:  
if (me.highlighted < (me.eligible.length - 1))  
{  
me.highlighted++;  
}  
me.changeHighlight(key);  
break;  
case ENTER:  
me.useSuggestion();  
break;  
}};  
elem.onkeyup = function(ev)  
{  
var key = me.getKeyCode(ev);  
switch(key)  
{  
case TAB:  
case ESC:  
case KEYUP:  
case KEYDN:  
return;  
default:  
if (this.value != me.inputText && this.value.length > 0)  
{  
me.inputText = this.value;  
me.ajax();	me.nach_100ms();  
}  
else  
{  
me.hideDiv();  
}}};  
this.nach_100ms = function(){  
if(Ro!=0)  
{  
clearTimeout(Ro);  
}  
Ro=window.setTimeout(function(){  
me.getEligible();  
me.createDiv();  
me.showDiv();  
}  
,550);  
};  
this.ajax = function(){  
var p =me.elem.value;  
if (window.XMLHttpRequest) {  
me.h = new XMLHttpRequest();  
} else if (window.ActiveXObject)  
{me.h = new ActiveXObject("Microsoft.XMLHTTP");}  
if (me.h != null)  
{  
me.h.open("GET", "http://deineUrl.de/hole.php?q="+encodeURIComponent(p), true);  
me.h.onreadystatechange = function(){  
if (me.h.readyState==4)  
{	var a=me.h.responseXML;  
var t=a.getElementsByTagName('suggestion');  
var la=t.length;  
for(var i=0;i<la;i++){me.suggestions[i]=t[i].getAttribute("data");}}};  
me.h.send("");  
}}  
this.useSuggestion = function()  
{  
if (this.highlighted > -1)  
{  
this.elem.value = this.eligible[this.highlighted];  
this.hideDiv();  
setTimeout("$('" + this.elem.id + "').focus()",0);  
}};  
this.showDiv = function()  
{  
this.div.style.display = 'block';  
};  
this.hideDiv = function()  
{  
this.div.style.display = 'none';  
this.highlighted = -1;  
};  
this.changeHighlight = function()  
{  
var lis = this.div.getElementsByTagName('LI');  
for (i in lis)  
{  
var li = lis[i];  
if (this.highlighted == i)  
{  
li.className = "selected";  
}  
else  
{  
li.className = "";  
}}};  
this.createDiv = function()  
{  
var ul = document.createElement('ul');  
for (i in this.eligible)  
{  
var word = this.eligible[i];  
var li = document.createElement('li');  
var a = document.createElement('a');  
a.href="javascript:false";  
a.innerHTML = word;  
li.appendChild(a);  
if (me.highlighted == i)  
{  
li.className = "selected";  
}  
ul.appendChild(li);  
}  
this.div.replaceChild(ul,this.div.childNodes[0]);  
ul.onmouseover = function(ev)  
{  
var target = me.getEventSource(ev);  
while (target.parentNode && target.tagName.toUpperCase() != 'LI')  
{  
target = target.parentNode;  
}  
var lis = me.div.getElementsByTagName('LI');  
for (i in lis)  
{  
var li = lis[i];  
if(li == target)  
{  
me.highlighted = i;  
break;  
}}  
me.changeHighlight();  
};  
ul.onclick = function(ev)  
{  
me.useSuggestion();  
me.hideDiv();  
me.cancelEvent(ev);  
return false;  
};  
this.div.className="suggestion_list";  
this.div.style.position = 'absolute';  
};  
this.getEligible = function(){  
this.eligible = new Array();  
for (i in this.suggestions){  
var suggestion = this.suggestions[i];  
if(suggestion.toLowerCase().indexOf(this.inputText.toLowerCase()) == "0")  
{  
this.eligible[this.eligible.length]=suggestion;  
}}};  
this.getKeyCode = function(ev)  
{  
if(ev){  
return ev.keyCode;  
}  
if(window.event)	{  
return window.event.keyCode;  
}};  
this.getEventSource = function(ev)  
{  
if(ev){  
return ev.target;  
} if(window.event)	{  
return window.event.srcElement;  
}};  
this.cancelEvent = function(ev)  
{if(ev){  
ev.preventDefault();  
ev.stopPropagation();}  
if(window.event)	{  
window.event.returnValue = false;  
}}}  

und dann in deine seite mußte du nach der suchfeld das einfügen
<script>
new Autosuggest();
</script>