CODEWITHSUNDEEP
jqueryjquery-uiautocompletejquery-ui-autocomplete
Eko
Eko

Reputation: 1557

Autocomplete with label, not value

I would like to add an autocomplete field with jquery-ui. I have a list of objects with values and labels, and I want that when the user selects an item, the value goes of an hidden field and the label is in the autocomplete field. But the documentation says "The value will be inserted into the input element when a user selects an item".

Can this behaviour be changed? I think it's more user-friendly if the label is displayed, not the value itself.

Upvotes: 0

Views: 837

Answers (1)

jackomelly
jackomelly

Reputation: 543

Focus on select field: using ui as argument, you can use ui.item.label and ui.item.value to do the magic. Use preventDefault() to block the predefined jQuery behavior.

$('#your_element').autocomplete({
  // [...]    
  select: function(e,ui){
    e.preventDefault();
    // set value in your element
    $(this).val(ui.item.label);
    // set value in the hidden field
    $('#hidden').val(ui.item.value);
  },
  // [...]    
});

Upvotes: 1

Related Questions