Hallo,
habe folgendes Problem.
Wenn ich ein Selectfeld habe, möchte ich mit der Tastatur die entsprechende Option eintippen und auf selected=true setzen können.
Bsp:
Ein select mit den options 1 bis 31. Tippe ich 22 (also zwei mal die 2 drücken) ein, soll die option mit dem value 22 selektiert sein. Ohne Javascript wird nach Eingabe von 22 die option mit dem value 21 selektiert.
Ich nutze das prototype Framework.
Hier mal mein bisheriger Code:
Event.observe(window, 'load', initSelects);
var keyLogger = '';
var selectID = '';
// alle selects beim Focus observen
function initSelects() {
var ID;
var counter = 0;
var selects = $$('select');
selects.each(function(Elem) {
counter++;
if(!Elem.id) {
Elem.id = ID = 'id_select_' + counter;
} else {
ID = Elem.id;
}
$(ID).onfocus = function() {if(selectID != this.id) {keyLogger = '';} selectID = this.id; document.observe('keydown', startLogger);};
$(ID).onblur = function() {document.stopObserving('keydown', startLogger);};
});
}
function startLogger(event) {
var key = event.keyCode;
// nur Zahlen/Buchstaben
if((48 <= key && key <= 57) || (65 <= key && key <= 90)) {
var keyChar = String.fromCharCode(key);
keyLogger = keyLogger.concat(keyChar);
// options ablaufen
for(i = 0; i < $(selectID).length; i++) {
// option.value startet mit bisheriger Eingabe -> selected setzen und Schleife beenden
if($(selectID).options[i].value.toString().startsWith(keyLogger)) {
$(selectID).options[i].selected = true;
break;
} else {
$(selectID).options[0].selected = true;
}
}
}
}
Allerdings haut das nicht ganz hin. Wenn ich jetzt 22 eintippe, wird die option mit dem value 23 selektiert. Das finde ich etwas verwirrend. Setze ich vor die Zeile $(selectID).options[i].selected = true;
ein alert('bla');
, wird nach Eingabe von 22 auch die option mit dem value 22 selektiert. Also so wie ich es mir gedacht habe. Nur verstehe ich grade nicht wo mein Fehler liegt.
Geht es denn überhaupt so, wie ich es mir gedacht habe, oder bin ich auf dem kompletten Holzweg?
Hoffe mir kann wer helfen.
THX & greetz
medi