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 discuss@jquery.com http://jquery.com/discuss/