jQuery UI autocomplete показывает значение вместо метки в поле ввода

Question

Потенциально простая проблема с автозаполнением jQuery UI превзошла меня. Мой источник

var ac = [ 
    { 
     label: "One Thing", 
     value: "One-Thing" 
    }, 
    { 
     label: "Two Thing", 
     value: "Two-Thing" 
    },  
] 

Я вызова виджета с

$(function() { 
    $("#search").autocomplete({ 
     source: PK.getAutocompleteSource(), 
     focus: function(event, ui) { 
      $("#search").val(ui.item.label); 
      return false; 
     }, 
     select: function(event, ui) { 
      $("#search").val(ui.item.label); 
      PK.render(ui.item.value); 
     } 
    }); 
}); 

Все работает отлично. Когда я ввожу в поле ввода #search, соответствующая метка отображается в раскрывающемся списке, а когда I select выполняется правильный поиск. Виджет даже показывает label в поле ввода #search, так как я выбираю разные элементы в раскрывающемся меню, используя клавиши со стрелками (или мышь). Кроме того, как только я нажму на ввод, виджет заполнит поле ввода #search с помощью value вместо label. Таким образом, поле показывает One-Thing вместо One Thing.

Как это исправить? Наверняка, что я ожидаю, это более разумное поведение, нет?

Answer 1

если вы хотите этикетку, чтобы быть ваше значение, просто источник быть

var ac = ["One Thing", "Two Thing"]  

альтернативно select метод autocompletes действия по умолчанию поставить value объект (если он указан) в качестве значения вашего вход. Вы можете также поместить event.preventDefault() в функции выбора, и он будет поставить метку в качестве значения (как есть)

select: function(event, ui) { 
     event.preventDefault(); 
     $("#search").val(ui.item.label); 
     PK.render(ui.item.value); 
    } 

Answer 2

Если вы хотите, чтобы ваш ярлык быть ваше значение в текстовом поле OnFocus И onSelect использовать этот код:

select: function(event, ui) { 
     $('#hiddenid').val(ui.item.value); 
     event.preventDefault(); 
     $("#search").val(ui.item.label); }, 

focus: function(event, ui) { 
     event.preventDefault(); 
     $("#search").val(ui.item.label);} 

Мне не хватает события onFocus (только установка события onSelect). Таким образом, значение продолжало отображаться в текстовом вводе.

Answer 3

У меня все еще была проблема с клавишами со стрелками, показывающими значения. Поэтому я действительно счел, что лучше назначить значение и метку метке, а затем поместить значение на третье свойство данных. Например, давайте поместим его в id.

var ac = [ 
    { 
     label: "One Thing", 
     value: "One Thing", 
     id: "One-Thing", 
    }, 
    { 
     label: "Two Thing", 
     value: "Two Thing", 
     id: "Two-Thing" 
    },  
] 

Затем при использовании выберите событие, вы можете получить идентификатор из Ui:

select: function(event, ui) { 
    PK.render(ui.item.id); 
}