Автозаполнение пользовательского интерфейса jQuery со стрелкой вниз — со стрелкой вверх

#jquery #jquery-ui #autocomplete #jquery-ui-autocomplete #arrow-keys

#jquery #jquery-пользовательский интерфейс #автозаполнение #jquery-пользовательский интерфейс-автозаполнение #клавиши со стрелками

Вопрос:

У меня возникли некоторые проблемы с автозаполнением jQuery и перемещением со стрелкой вниз и со стрелкой вверх?

Проблема, похоже, в том, что

<input id="autocomplete-input" value="">

 focus: function (event, ui) {
       $('#autocomplete-input').val(ui.item.label);
 }
  

Это отлично работает для фокусировки МЫШИ, но когда я использую arrowUp и arrowDown — он выбирает ui.item.id поверх ui.item.label

Как я могу это исправить, чтобы либо:

  1. input значение вообще не изменяется [т. Е. сохраняется введенный пользователем термин]
  2. он обновляет input значение на focused значение, на котором находится пользователь, с помощью keydown / keyup

Спасибо

Ответ №1:

Убедитесь, что не допустимо поведение focus события по умолчанию:

 focus: function (event, ui) {
    this.value = ui.item.label;
      // or $('#autocomplete-input').val(ui.item.label);

    // Prevent the default focus behavior.
    event.preventDefault();
      // or return false;
}
  

Комментарии:

1. ага! огромное спасибо @andrew — я совершенно забыл попробовать это 🙂

2. Это работает, но есть одна проблема, когда клавиша (вверх / вниз) находится в текстовом поле выбранного элемента, отображается значение, а не метка, но после нажатия enter его значение снова отображается