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>