nicht angemeldet
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>