Opened 10 years ago

Closed 10 years ago

Last modified 10 years ago

#8394 closed bug (notabug)

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:


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.

Change History (5)

comment:1 Changed 10 years ago by jimmont

submitted pull request with potential fix:

comment:2 Changed 10 years ago by Jörn Zaefferer

Resolution: invalid
Status: newclosed

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.

comment:3 Changed 10 years ago by Scott González

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.

comment:4 Changed 10 years ago by Scott González

Component: ui.coreui.autocomplete

comment:5 Changed 10 years ago by jimmont

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

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
Note: See TracTickets for help on using tickets.