Christian Bach schrieb:
> Erik Beeson wrote:
>> Changing with the arrow keys is nice, but it seems like it should select
>> when you hit Enter, and revert to the last selection when you hit ESC.
>
> It's now on the list of stuff to implement.
>
> Perhaps accessibility expert Klaus, could share some light on what keys
> that needs to be supported?
Hey Christian, I'm happy to share my recent findings - I implemented an
autocomplete keyboard navigation for Plazes just yesterday - funny! In
my opinion the following keys should be supported: return, tab, esc, up,
down.
If you press escape though I think the select should be hidden instead
of going back to a previous result...?
It is based on Dylans autocomplete to give some credit, but I also
encountered a few browser inconsistencies, thus I fixed a few things. It
works like this:
tab: focus the next element of the currently selected one in the
autocomplete list
return: choose value and hide autocomplete
esc: hide autocomplete
down: ... and show list if it is hidden
up: ... and hide list if you navigate out of list at the top
Here is what I ended up with:
var moveSelect = function(step) {
var as = $(o.AUTOCOMPLETE_OUTPUT + ' a');
if (as.size()) {
var selected = as.index($(o.AUTOCOMPLETE_OUTPUT + '
a.selected')[0]);
selected += step;
if (selected < 0) {
selected = -1;
} else if (selected >= as.size()) {
selected = as.size() - 1;
}
as.removeClass('selected');
if (selected >= 0) {
as.eq(selected).addClass('selected');
} else {
/[EMAIL PROTECTED]
o.iframeCover.style.visibility = 'hidden';
@*/
$(o.AUTOCOMPLETE_OUTPUT).hide();
}
}
};
autocompleter
.keydown(function(e) {
switch(e.keyCode) {
case 9: // tab
if ($(o.AUTOCOMPLETE_OUTPUT).is(':visible')) {
e.preventDefault();
moveSelect(1);
}
break;
case 13: // return
// fall through, handled by keypress for browser
consistency
break;
case 27: // esc
e.preventDefault();
this.focus(); // Opera
/[EMAIL PROTECTED]
o.iframeCover.style.visibility = 'hidden';
@*/
$(o.AUTOCOMPLETE_OUTPUT).hide();
break;
case 38: // up
e.preventDefault();
moveSelect(-1);
break;
case 40: // down
if ($(o.AUTOCOMPLETE_OUTPUT).is(':visible')) {
e.preventDefault();
moveSelect(1);
} else {
o._autocomplete(e);
}
break;
default:
o._autocomplete(e);
break;
}
})
.keypress(function(e) {
if ($(o.AUTOCOMPLETE_OUTPUT).is(':visible')) {
switch(e.keyCode) {
case 9: // tab
return false;
break;
case 13: // return
$(o.AUTOCOMPLETE_OUTPUT + ' a.selected').click();
return false;
}
}
})
I hope you get the picture. Replace "o.AUTOCOMPLETE_OUTPUT" with a
reference to your select list.
>> Also,
>> using something like this breaks tabbing between form elements, doesn't it?
I took care of that. If the autocompletion is visible, you tab in that
list, otherwise you tab to the next form elememt. Only Opera doesn't
like that.
-- Klaus
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
