#8394 closed bug (notabug)

Opened June 12, 2012 01:45AM UTC

Closed June 12, 2012 07:26AM UTC

Last modified June 12, 2012 05:29PM UTC

focus of autocomplete items sources item value instead of label for source items

Reported by: jimmont Owned by:
Priority: minor Milestone: 1.9.0
Component: ui.autocomplete Version: 1.8.21
Keywords: Cc:
Blocked by: Blocking:
Description

When the autocomplete source uses a list of items that have different label and value pairs, as I interact with the autocomplete listing, the UI fills the selected field with the item.value instead of the desired item.label. For example, an item has the label: "apples", and the value: "123". When I walk through the options this item shows "123" in the UI instead of "apples".

Reproducible in 1.8.21 and 1.8.16. Thinking it might affect all versions.

Attachments (0)
Change History (5)

Changed June 12, 2012 01:52AM UTC by jimmont comment:1

submitted pull request with potential fix:

https://github.com/jquery/jquery-ui/pull/678

Changed June 12, 2012 07:26AM UTC by jzaefferer comment:2

resolution: → invalid
status: new → closed

This is working as intended. If you need more data, for example an id to put into a hidden field, you should use other properties instead. The data you provide to autocomplete can have any properties, only value and label are used by autocomplete. You could also cancel the focus and select events to implement custom behaviour.

Changed June 12, 2012 11:12AM UTC by scottgonzalez comment:3

For more background on this, go look at existing autocomplete implementations and you'll notice this is the behavior that they have. The easiest way to see this is to start typing in any URL in your browser's location bar.

Changed June 12, 2012 11:13AM UTC by scottgonzalez comment:4

component: ui.core → ui.autocomplete

Changed June 12, 2012 05:29PM UTC by jimmont comment:5

reading the doc more closely I see the detail called out:

http://jqueryui.com/demos/autocomplete/

The data from local data, a url or a callback can come in two variants:
...
An Array of Objects with label and value properties:
[ { label: "Choice1", value: "value1" }, ... ]
The label property is displayed in the suggestion menu. 
The value will be inserted into the input element after the user selected something