Hallo.
Ich habe ein input Feld mit einer Autosuggest Funktion welche die Ergebnisse aus der Datenbank in eine Liste(ul) schreibt.
Dann habe ich ein Skript welches auf Tastatureingaben reagiert womit ich dann durch die Ergebnisse navigieren kann. Das klappt auch super, auch das qnwählen und richtige reagieren.
Allerdings klappt das navigieren nur einmal bis ich etwas ausgewählt habe und nur durch drücken der Enter-Taste und nicht durch den Mausklick - es soll aber beides möglich sein und falls man doch was an der Suchphrase ändert soll man durch neue Vorschläge ebenfalls navigieren können. Das geht erst nach dem Neuladen der Seite.
Woran liegt das?
<input type='text' id='Category' name='category' />
<ul id='Categories'></ul>
<script type='text/javascript'>
addEvent(document, 'keypress', activateChoose); // Ergebnis auswählen mit Enter
addEvent(document, 'click', activateChoose); // Ergebnis auswählen mit Maus
addEvent(document, 'keypress', chooseCategory); // Navigieren
addEvent(document.getElementById('Category'), 'keyup', showCats); // Vorschläge machen
</script>
function addEvent (obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
} else if (obj.attachEvent) {
obj.attachEvent('on' + type, function () {
return fn.call(obj, window.event);
});
}
}
var curElement=null;
// Durch Vorschläge navigieren mit Pfeiltasten und bei Enter auswählen
function chooseCategory(e){
naviElement=document.getElementById('Category');
catElement=document.getElementById('Categories');
var key=e.keyCode;
switch(key){
case 38:
if(curElement && curElement.previousSibling) {
curElement.removeAttribute('class');
curElement = curElement.previousSibling;
}
break;
case 40:
if(curElement) {
if(curElement.nextSibling) {
curElement.removeAttribute('class');
curElement = curElement.nextSibling;
}
} else {
curElement = catElement.firstChild;
}
break;
case 13:
if(curElement) {
activateChoose(curElement);
return;
}
break;
default: return;break;
}
// Das ausgewählte Element bekommt eine andere CSS-Klasse
curElement.className='actC';
}
// Vorschlag auswählen und passend reagieren
function activateChoose(e){
f=(!e)?this:e;
if(f.parentNode==document.getElementById('Categories')){
/* Reaktionen wenn es ausgewählz wurde, der übersichtlichkeit mal rausgelassen - sind nur CSS Veränderungen(Farbe des Inputsfeldes z.B.!*/
}
}
Ich glaube ich weiß wo der Fehler liegt und zwar bei:
addEvent(document, 'click', activateChoose);
Er bräuchte irgendwie document.getElementById('Categories').childNodes
aber das funktioniert nicht =/
Lg, Phil