vsc
2009-10-09 10:11:32 UTC
For clarity, I have modified the code in the demo application to
demonstrate the bug.
1. Please download code from http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
and place attached AutosuggestBug.html in demo folder.
2. Launch AutosuggestBug.html in Internet Explorer (I used version
IE7).
2. In "Multiple Cities (local)" text area enter letter "a" (Observe
autosuggest list displayed with focus on Aberdeen)
3. Press enter (to add Aberdeen)
4. Enter letter "a" again (Observe autosuggest list displayed with
focus on Aberdeen)
5. Select Ada (the second entry in auto suggest list) with a mouse
click.
Expected Result:
The "Multiple Cities (local)" text area should be populated with
Aberdeen, Ada (as is the case with Firefox).
Actual Result:
In IE, the "Multiple Cities (local)" text area is populated with Ada,
a.
Additional information:
On debugging the code, the problem seems to be in the following
snippet of code:
selectCurrent() {
...............
if ( options.multiple ) {
var words = trimWords($input.val());
if ( words.length > 1 ) {
var seperator = options.multipleSeparator.length;
var cursorAt = $(input).selection().start;
...........
if (cursorAt <= progress) {
wordAt = i;
return false;
}
.......
});
words[wordAt] = v;
.......
v = words.join( options.multipleSeparator );
}
v += options.multipleSeparator;
}
$input.val(v);
......
}
The problem occurs primarily at:
var cursorAt = $(input).selection().start;
Here, the variable, 'cursorAt' holds an incorrect value of -1 (return
value from the selection() function) when selection happens via mouse
click in IE.
NOTE: This problem happens only in IE.
Has somebody encountered this problem and/or have a recommended
solution to this problem?
Any help will be appreciated.
Regards,
Charanya
Attachment:
AutosuggestBug.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html>
<head>
<title>jQuery Autocomplete Plugin</title>
<script type="text/javascript" src="../lib/jquery.js"></script>
<script type='text/javascript' src='../lib/jquery.bgiframe.min.js'></
script>
<script type='text/javascript' src='../lib/jquery.ajaxQueue.js'></
script>
<script type='text/javascript' src='../lib/thickbox-compressed.js'></
script>
<script type='text/javascript' src='../jquery.autocomplete.js'></
script>
<script type='text/javascript' src='localdata.js'></script>
<link rel="stylesheet" type="text/css" href="main.css" />
<link rel="stylesheet" type="text/css" href="../
jquery.autocomplete.css" />
<link rel="stylesheet" type="text/css" href="../lib/thickbox.css" />
<script type="text/javascript">
$().ready(function() {
$("#suggest3").autocomplete(cities, {
multiple: true,
matchContains: true,
autoFill: false
});
});
</script>
</head>
<body>
<div id="content">
<form autocomplete="off">
<p>
<label>Multiple Cities (local):</label>
<textarea id='suggest3' cols='40' rows='3'></textarea>
<input type="button" value="Get Value" />
</p>
</form>
</div>
</body>
</html>
demonstrate the bug.
1. Please download code from http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
and place attached AutosuggestBug.html in demo folder.
2. Launch AutosuggestBug.html in Internet Explorer (I used version
IE7).
2. In "Multiple Cities (local)" text area enter letter "a" (Observe
autosuggest list displayed with focus on Aberdeen)
3. Press enter (to add Aberdeen)
4. Enter letter "a" again (Observe autosuggest list displayed with
focus on Aberdeen)
5. Select Ada (the second entry in auto suggest list) with a mouse
click.
Expected Result:
The "Multiple Cities (local)" text area should be populated with
Aberdeen, Ada (as is the case with Firefox).
Actual Result:
In IE, the "Multiple Cities (local)" text area is populated with Ada,
a.
Additional information:
On debugging the code, the problem seems to be in the following
snippet of code:
selectCurrent() {
...............
if ( options.multiple ) {
var words = trimWords($input.val());
if ( words.length > 1 ) {
var seperator = options.multipleSeparator.length;
var cursorAt = $(input).selection().start;
...........
if (cursorAt <= progress) {
wordAt = i;
return false;
}
.......
});
words[wordAt] = v;
.......
v = words.join( options.multipleSeparator );
}
v += options.multipleSeparator;
}
$input.val(v);
......
}
The problem occurs primarily at:
var cursorAt = $(input).selection().start;
Here, the variable, 'cursorAt' holds an incorrect value of -1 (return
value from the selection() function) when selection happens via mouse
click in IE.
NOTE: This problem happens only in IE.
Has somebody encountered this problem and/or have a recommended
solution to this problem?
Any help will be appreciated.
Regards,
Charanya
Attachment:
AutosuggestBug.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html>
<head>
<title>jQuery Autocomplete Plugin</title>
<script type="text/javascript" src="../lib/jquery.js"></script>
<script type='text/javascript' src='../lib/jquery.bgiframe.min.js'></
script>
<script type='text/javascript' src='../lib/jquery.ajaxQueue.js'></
script>
<script type='text/javascript' src='../lib/thickbox-compressed.js'></
script>
<script type='text/javascript' src='../jquery.autocomplete.js'></
script>
<script type='text/javascript' src='localdata.js'></script>
<link rel="stylesheet" type="text/css" href="main.css" />
<link rel="stylesheet" type="text/css" href="../
jquery.autocomplete.css" />
<link rel="stylesheet" type="text/css" href="../lib/thickbox.css" />
<script type="text/javascript">
$().ready(function() {
$("#suggest3").autocomplete(cities, {
multiple: true,
matchContains: true,
autoFill: false
});
});
</script>
</head>
<body>
<div id="content">
<form autocomplete="off">
<p>
<label>Multiple Cities (local):</label>
<textarea id='suggest3' cols='40' rows='3'></textarea>
<input type="button" value="Get Value" />
</p>
</form>
</div>
</body>
</html>