Response title
This is preview!
jquery.autocomplete ie8 problem with multiple selects
in Using jQuery Plugins
•
12 years ago
In the demo page, the multiple bird example does not work with internet explorer. The first selection works great, but the 2nd thru the last, returns the text string typed instead of the selected item. The selected item shown at the bottom of the page is correct. For example, if for the 2nd item you type 'b" and select "Great Bittern" then "b," is shown in the text box instead of "Great Bittern,".
The sample works great using firefox.
After looking at the issue a bit more, if you use the <enter> key to select an item from the list, then it works using internet explorer, but if you use to the mouse and click on an item in the list it fails.
I looked at the code at the problem manifests iteselft in the function selectCurrent(). The code segment
if
( options.multiple ) {
var words = trimWords($input.val());
if ( words.length > 1 ) {
var seperator = options.multipleSeparator.length;
var cursorAt = $(input).selection().start;
var wordAt, progress = 0;
$.each(words, function(i, word) {
progress += word.length;
if (cursorAt <= progress) {
wordAt = i;
return false;
}
progress += seperator;
});
words[wordAt] = v;
The line: var cursorAt = $(input).selection().start; returns a -1 in the case that doesn't work, thus the value of wordAt = 0, and words[0] is replaced instead of the word at the correct location in the result string.
The code snippet for for the function selection()
if
(field.createTextRange) {
var range = document.selection.createRange(),
orig = field.value,
teststring = "<->",
textLength = range.text.length;
range.text = teststring;
var caretAt = field.value.indexOf(teststring);
field.value = orig;
this.selection(caretAt, caretAt + textLength);
return {start: caretAt,end: caretAt + textLength}
}
For some reason the createRange, which is used to find the current cursor position, creates the range object at the beginning of the field instead of where the cursor actually is located.
2
