Great plugin, but I cannot believe there are not more threads on this topic.
This issue can be clearly seen on autocomplete's demo here: http://jquery.bassistance.de/autocomplete/demo/ Using IE (works as expected in FF) try entering values into the Multiple Cities (local): text box. The selected option is added to the beginning of the list in proper case as well as to the end of the list in lowercase. Other stange things happen if you select options beginning with the same letter. If you hold down shift when selecting your options it appear to act as expected. Any help would be much appreciated. Does anyone have a fix for this in IE? On Oct 9, 11:11 am, vsc <charany...@gmail.com> wrote: > For clarity, I have modified the code in the demo application to > demonstrate the bug. > 1. Please download code > fromhttp://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>
