Skip to content
Permalink
Browse files

IE fixes for display of the suggestions and UP+DOWN arrow selection.

For some reason IE wraps the newly created wrapper for the suggestions
in a DIV.  Moving down to the wrapper node so it looks just like the
node all of the other browsers give us.

Keying off UP+DOWN on keyup because that is the only place IE exposes them.

Preventing TAB on both keyup and keydown during autocompleteMode so
we do not both select the next suggestion from our autocomplete list
and move focus to another element (i.e. suggestions for input A present
but focus is on input B).
  • Loading branch information...
istruble committed Apr 15, 2008
1 parent 723d7ac commit bdc926bd2c18c3ebab4e31463a8ae899fd761316
Showing with 35 additions and 8 deletions.
  1. +3 −3 autocomplete.html
  2. +32 −5 jquery.ui.autocomplete.js
@@ -21,8 +21,7 @@
<script src="jquery.ui.autocomplete.ext.js"></script>
<script src="jquery.ui.autocomplete.js"></script>
<script>
console = typeof(console) !== 'undefined' ? console : {};
console.log = typeof(console.log) !== 'undefined' ? console.log : function(msg) { $('#log').html(msg + '<br/>\n' + $('#log').html() ); };
console = typeof(console) !== 'undefined' ? console : { log: function(msg) { $('#log').html(msg + '<br/>\n' + $('#log').html() ); } };
$(function() {
$("input.autocomplete.0").autocomplete({
@@ -72,9 +71,10 @@
<input type="text" class="autocomplete 0" />

<br />
<form onsubmit="return false;">
<form onsubmit="alert('trying to submit'); return false;">
<input type="text" class="autocomplete 1" />
<input type="text" class="autocomplete 2" />
<input type="submit" value="stub submit"/>
</form>
<div id="log"></div>
</body>
@@ -117,9 +117,34 @@
}
} }

return this.each(function() {
function preventTabInAutocompleteMode(e) {
var k = e.which || e.keycode;
if ($.data(document.body, "autocompleteMode") && k == KEY.TAB) {
e.preventDefault();
}
}
function startTypingTimeout(e) {
$.data(this, "typingTimeout", window.setTimeout(function() {
$(e.target || e.srcElement).trigger("autocomplete");
}, opt.timeout));
}

return this.each(function() {
$(this)
.keydown(function(e) {
preventTabInAutocompleteMode(e);
})
.keyup(function(e) {
var k = e.which || e.keycode;
if (!$.data(document.body, "autocompleteMode") &&
(k == KEY.UP || k == KEY.DOWN) &&
!$.data(this, "typingTimeout")) {
startTypingTimeout(e);
}
else {
preventTabInAutocompleteMode(e);
}
})
.keypress(function(e) {
var typingTimeout = $.data(this, "typingTimeout");
var k = e.keyCode || e.which; // keyCode == 0 in Gecko/FF on keypress
@@ -128,10 +153,8 @@
if($.data(document.body, "suppressKey"))
return $.data(document.body, "suppressKey", false);
else if($.data(document.body, "autocompleteMode") && k < 32 && k != KEY.BS && k != KEY.DEL) return false;
else if (k != KEY.TAB && k != KEY.ESC) { // don't start the meter running if we are tabbing out or escaping this nuthouse
$.data(this, "typingTimeout", window.setTimeout(function() {
$(e.target).trigger("autocomplete");
}, opt.timeout));
else if (k > 32) { // more than ESC and RETURN and the like
startTypingTimeout(e);
}
})
.bind("autocomplete", function() {
@@ -151,6 +174,10 @@
if(!list.length) return false;

var container = list.wrapAll(opt.wrapper).parents(":last").children();
// IE seems to wrap the wrapper in a random div wrapper so
// drill down to the node in opt.wrapper.
var wrapper_tagName = $(opt.wrapper)[0].tagName;
for (;container[0].tagName !== wrapper_tagName; container = container.children(':first')) {}

var offset = self.offset();

2 comments on commit bdc926b

@decadre

This comment has been minimized.

Copy link

replied Jan 8, 2009

Bug with timeout not being cleared. As you moved the timeout into its own function, you lost proper scope of ‘this’. As a result, when you go to clear the timeout, you can’t! This means that typing a 6 letter term into the autocompleter results in 6 requests being fired off and the results being shoddy due to it being random what order the requests get back from the server.

@decadre

This comment has been minimized.

Copy link

replied Jan 8, 2009

Another bug – keypress is not suitable here as IE will not detect backspace as a keypress, and thus deleting characters does not trigger a refresh of the list. Changing the keypress to a keyup seems to work fine in IE 6/7

Please sign in to comment.
You can’t perform that action at this time.