@@ -86,7 +86,7 @@ input.textfield{
.autocomplete ul.auto-dropdown li:first-child{
border-top:none;
}
-.autocomplete ul.auto-dropdown li:hover, .autocomplete ul.auto-dropdown li.highlighted{
+.autocomplete ul.auto-dropdown li.highlighted{
background:#fdffe5;
}
.autocomplete ul.auto-dropdown li strong{
examples/styles.css
@@ -128,5 +128,15 @@ describe("Keyboard Interaction", {
input.fireEvent('keyup', {key: 'up'});
input.fireEvent('keyup', {key: 'up'});
value_of(Instance.highlightedChoice).should_be(dropdown.getElements('li')[0]);
+ },
+
+ 'should highlight the choice while hovering': function(){
+ dropdown.getElements('li')[2].fireEvent('mouseover');
+ value_of(Instance.highlightedChoice).should_be(dropdown.getElements('li')[2]);
+ },
+ 'should move the keyboard from where the mouse is hovering': function(){
+ dropdown.getElements('li')[2].fireEvent('mouseover');
+ input.fireEvent('keyup', {key: 'up'});
+ value_of(Instance.highlightedChoice).should_be(dropdown.getElements('li')[1]);
}
});
\ No newline at end of file
spec/specs.js
@@ -108,55 +108,59 @@ var SelectAutocompleter = new Class({
},
keyListener: function(event){
+ // Escape means we want out!
if (event.key == "esc"){
this.onBlur();
this.element.blur();
- }else if(event.key == "up"){
+
+ // Up/Down arrows to navigate the list
+ }else if(event.key == "up" || event.key == "down"){
var choices = this.dropDown.getElements('li');
if (choices.length == 0) return;
- if (this.highlightedChoice == null){
- this.highlightedChoice = choices[0];
- this.highlightedChoice.addClass('highlighted');
- }else{
- this.highlightedChoice.removeClass('highlighted');
- if (choices.indexOf(this.highlightedChoice) == -1 || choices.indexOf(this.highlightedChoice) == 0){
- this.highlightedChoice = choices[0];
- this.highlightedChoice.addClass('highlighted');
- }else{
- this.highlightedChoice = choices[choices.indexOf(this.highlightedChoice) - 1];
- this.highlightedChoice.addClass('highlighted');
- }
+ // If there's no previous choice, or the current choice has been filtered out
+ if (this.highlightedChoice == null || choices.indexOf(this.highlightedChoice) == -1){
+ this.highlight(choices[0]);
+ return;
}
- }else if(event.key == "down"){
- var choices = this.dropDown.getElements('li');
- if (choices.length == 0) return;
-
- if (this.highlightedChoice == null){
- this.highlightedChoice = choices[0];
- this.highlightedChoice.addClass('highlighted');
- }else{
- this.highlightedChoice.removeClass('highlighted');
- if (choices.indexOf(this.highlightedChoice) == -1){
- this.highlightedChoice = choices[0];
- this.highlightedChoice.addClass('highlighted');
- }else if(choices.indexOf(this.highlightedChoice) == choices.length - 1){
- this.highlightedChoice = choices[choices.length - 1];
- this.highlightedChoice.addClass('highlighted');
- }else{
- this.highlightedChoice = choices[choices.indexOf(this.highlightedChoice) + 1];
- this.highlightedChoice.addClass('highlighted');
- }
+ switch(event.key){
+ case "up":
+ // Are we at the top of the list already?
+ if (choices.indexOf(this.highlightedChoice) == 0){
+ this.highlight(choices[0]);
+ // Otherwise, move down one choice
+ }else{
+ this.highlight(choices[choices.indexOf(this.highlightedChoice) - 1]);
+ }
+ break;
+ case "down":
+ // Are we at the bottom of the list already?
+ if(choices.indexOf(this.highlightedChoice) == choices.length - 1){
+ this.highlight(choices[choices.length - 1]);
+ // Otherwise, move up one choice
+ }else{
+ this.highlight(choices[choices.indexOf(this.highlightedChoice) + 1]);
+ }
+ break;
}
+
+ // Select an item through the keyboard
}else if (event.key == "return" || event.key == "enter"){
this.termChosen = this.highlightedChoice.getAttribute('rawText');
this.element.blur();
+
+ // Regular keys (filtering for something)
}else{
this.updateTermsList();
}
},
+ highlight: function(elem){
+ if (this.highlightedChoice) this.highlightedChoice.removeClass('highlighted');
+ this.highlightedChoice = elem.addClass('highlighted');
+ },
+
updateTermsList: function(){
var filterValue = this.element.get('value');
this.buildFilteredTerms(filterValue);
@@ -200,6 +204,8 @@ var SelectAutocompleter = new Class({
choice.addEvent('click', function(){
this.termChosen = scoredTerm[1];
}.bind(this));
+ choice.addEvent('mouseover', this.highlight.bind(this, choice));
+
this.dropDown.appendChild(choice);
}, this);
},
src/select_autocompleter.js
12c3b827d44d442e3e782a7d0c4d8d3ac392eed2
Kyle Neath
kneath@gmail.com
http://github.com/kneath/select-autocompleter/commit/660dff371a84eff1f8fcc39268db91cfb276ee5a
660dff371a84eff1f8fcc39268db91cfb276ee5a
2008-09-26T23:25:57-07:00
2008-09-26T23:25:57-07:00
Make the keyboard interactions and mouse interactions happy with each other
66c9849badaed28a9dbd14a66333004c8650c9c6
Kyle Neath
kneath@gmail.com