Question

I have a multiple select and an autocomplete input. Each time the user insert an element in the autocomplete input I would like to select the corresponding element in the multiple select.

I have this code:

jQuery("#example")
.autocomplete('autocomplete', jQuery.extend({}, {
dataType: 'json',
parse: function(data) {

  var parsed = [];
  for (key in data) {

     parsed[parsed.length] = { data: [ data[key], key ], value: data[key], result: data[key] };
  }

  return parsed;

  }
}, {multiple:true}))
.result(function(event, data) {
 $("#select option[value=" + key + "]").attr("selected", true);


});

The action autocomplete is returning this kind of data:

{"17":"element_17","18":"element_18"}

The problem: the value of “key” (value=" + key + ") is always 18, even when i select element_17.

Any idea what should i change/add?

Regards

Javi

Answer 1

Ok, so what is going on, is you are formating your data incorrectly for your auto complete.

you want each auto-complete element to look like

{ 'key' : '17', 'value' : 'element 17' }

And you would need to send down an array of elements that looks like this

[ { 'key' : '17', 'value' : 'element 17' },
  { 'key' : '18', 'value' : 'element 18' } ]