Skip to content

Commit 41f756f

Browse files
committed
make selecting of autocomplete items use each item's label instead of
number to fix issue 8394 http://bugs.jqueryui.com/ticket/8394 >> 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". <<
1 parent 4aafdfd commit 41f756f

File tree

1 file changed

+4
-3
lines changed

1 file changed

+4
-3
lines changed

ui/jquery.ui.autocomplete.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -238,18 +238,19 @@ $.widget( "ui.autocomplete", {
238238
// back compat for _renderItem using item.autocomplete, via #7810
239239
// TODO remove the fallback, see #8156
240240
var item = ui.item.data( "ui-autocomplete-item" ) || ui.item.data( "item.autocomplete" );
241+
var _label = item.label;
241242
if ( false !== this._trigger( "focus", event, { item: item } ) ) {
242243
// use value to match what will end up in the input, if it was a key event
243244
if ( event.originalEvent && /^key/.test( event.originalEvent.type ) ) {
244-
this._value( item.value );
245+
this._value( _label );
245246
}
246247
} else {
247248
// Normally the input is populated with the item's value as the
248249
// menu is navigated, causing screen readers to notice a change and
249250
// announce the item. Since the focus event was canceled, this doesn't
250251
// happen, so we update the live region so that screen readers can
251252
// still notice the change and announce it.
252-
this.liveRegion.text( item.value );
253+
this.liveRegion.text( _label );
253254
}
254255
},
255256
menuselect: function( event, ui ) {
@@ -272,7 +273,7 @@ $.widget( "ui.autocomplete", {
272273
}
273274

274275
if ( false !== this._trigger( "select", event, { item: item } ) ) {
275-
this._value( item.value );
276+
this._value( item.label );
276277
}
277278
// reset the term after the select event
278279
// this allows custom select handling to work properly

0 commit comments

Comments
 (0)