Skip to main content

Search and Top Navigation

#5761 closed bug (fixed)

Opened June 23, 2010 02:42PM UTC

Closed June 23, 2010 02:44PM UTC

Last modified November 19, 2010 06:25PM UTC

Autocomplete: multiple demos need extra IE handling for cursor position

Reported by: jzaefferer Owned by:
Priority: minor Milestone: 1.8.3
Component: ui.autocomplete Version: 1.8.2
Keywords: Cc:
Blocked by: Blocking:


While attempting to implement an autocomplete widget similar to the " Multiple values " and " Multiple, remote " demos on the jQuery UI website, I discovered a minor issue when using the autocomplete field in Internet Explorer (tested in IE7 and IE8).

Once the user selects an item from the autocomplete dropdown, the caret (cursor) position in the text field resets to the beginning of the text field, rather than moving to the end of the value.

Because of this, if the user is not savvy enough to realize that the cursor is in the wrong place, they will most likely end up trying to type a second value that, instead of being recognized as a separate value, just gets prepended to the first selected value. For instance, let's say I type "ja" and then select "javascript" from the autocomplete dropdown. Once I've selected "javascript", I start typing "co". In IE, the value of the text input will now look like:
Copy code

   1. cojavascript, 

instead of:
Copy code

   1. javascript, co

To battle this issue, I have added the following code just below this.value = terms.join(", ");
Copy code

   1. if(document.selection) {
   2.   this.focus();
   3.   var oSel = document.selection.createRange();
   4.   oSel.moveStart('character',this.value.length);
   5.   oSel.moveEnd('character',0);
   7. }

I'm sure there's probably a more elegant solution, but this seems to work for now. If you have any better suggestions, please let me know. Hopefully something can be added to the widget itself to make sure that the caret always ends up at the end of the text field after selecting an item. Thank you.

The suggestion looks good and the code should be added to the demos. If the code can be reused elsewhere, we can consider moving it to the widget.

Attachments (0)
Change History (3)

Changed June 23, 2010 02:44PM UTC by jzaefferer comment:1

resolution: → fixed
status: newclosed

Changed August 04, 2010 01:30AM UTC by scottgonzalez comment:2


Changed November 19, 2010 06:25PM UTC by jzaefferer comment:3

Autocomplete: Update cursor position in multiple demos in IE. Fixes #5761 - Autocomplete: multiple demos need extra IE handling for cursor position

Changeset: 965dddd9818f7f24ec63666da356248a1c010636