使用标签而不是值自动完成

Question

我想用 jquery-ui 添加一个自动完成字段。我有一个带有值和标签的对象列表，我希望当用户选择一个项目时，值会出现在隐藏字段中，标签位于自动完成字段中。但是文档说“当用户选择一个项目时，该值将被插入到输入元素中”。

可以改变这种行为吗？我认为如果显示标签而不是值本身会更加用户友好。

Answer 1

关注select 字段：使用ui 作为参数，您可以使用ui.item.label 和ui.item.value 来发挥作用。 使用preventDefault() 阻止预定义的jQuery 行为。

$('#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);
  },
  // [...]    
});