Opened 9 years ago

Closed 9 years ago

Last modified 9 years ago

#5761 closed bug (fixed)

Autocomplete: multiple demos need extra IE handling for cursor position

Reported by: Jörn Zaefferer Owned by:
Priority: minor Milestone: 1.8.3
Component: ui.autocomplete Version: 1.8.2
Keywords: Cc:
Blocked by: Blocking:

Description

From http://forum.jquery.com/topic/ui-autocomplete-multiple-demo-caret-position-in-ie:


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);
   6.   oSel.select();
   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.

Change History (3)

comment:1 Changed 9 years ago by Jörn Zaefferer

Resolution: fixed
Status: newclosed

comment:2 Changed 9 years ago by Scott González

Milestone: 1.91.8.3

comment:3 Changed 9 years ago by Jörn Zaefferer

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

Changeset: 965dddd9818f7f24ec63666da356248a1c010636

Note: See TracTickets for help on using tickets.