jquery autocomplete source option with function returning label and value

Question

I'm using jQuery 3.3.1 and jQuery-ui 1.12.1. I have an input field where an user should choose among objects of an array, previously retrieved with an ajax call and stored in a variable.

The documentation of the source option of autocomplete says that if a function is provided to filter the terms, it should return an array of strings to make the user choose from.

I'd like to separate the view (the string that I display to the user) from the data, the object beneath it. I've seen that I can return an array of objects {label: 'string to display', value: the_object} from the source option, and the label is correctly displayed, but when the user selects it, it turns into an anonymous string [object Object].

Having the label string in the input field after the selection would be great, but it could be ok just showing the terms as they are, without any replacement; otherwise I'd like to have the field cleared, and I thought to clear it with:

select: function(event, ui) {
  var _content = ui.item;   // Store the content of the field somewhere.
  $(event.target).val('');
}

but .val('') doesn't work, nor does .val(null).

Here's a test fiddle: https://jsfiddle.net/xpvt214o/16284/

CertainPerformance · Accepted Answer · 2018-03-31 22:58:51Z

1

Have the elements_that_match object's value be the string you want, not an object.

elements_that_match.push({"label" : _label, "value" : element_obj});

to

elements_that_match.push({"label" : _label, "value" : element_obj.name + ', ' + element_obj.country });

https://jsfiddle.net/xpvt214o/16303/

answered Mar 31, 2018 at 22:58

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alberto Chiusole Over a year ago

I wanted to avoid "re-interpreting" the value back from a string, since I use it in the select option to populate a form. But you gave me an idea that solved the issue, thanks!

Alberto Chiusole · Accepted Answer · 2018-03-31 23:21:21Z

0

The solution I found, inspired by @CertainPerformance answer, is to store the original dictionary object with a different key, such as orig_obj, so that I can then work directly on it in the select method.

In this way, the label string is displayed when the user selects the label, but we can manipulate the object in its original form.

Fiddle: https://jsfiddle.net/xpvt214o/16356/

answered Mar 31, 2018 at 23:21

Alberto Chiusole

2,8942 gold badges19 silver badges28 bronze badges

Collectives™ on Stack Overflow

jquery autocomplete source option with function returning label and value

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related