Блог

Главная - Вопросы по программированию - Выберите элемент из выпадающего списка при размытии ввода с помощью jQuery

Выберите элемент из выпадающего списка при размытии ввода с помощью jQuery

#jquery #ajax #input

#jquery #ajax #ввод

Вопрос:

В моем проекте я использую выпадающее меню (bootstrap 4) при вводе текста пользователем, чтобы предоставить список выбираемых элементов.

HTML-код выглядит следующим образом:

 <div class="dropdown">
    <input type="hidden" id="ad_id" name="ad_id" value="">
    <label for="aerodrome" class="control-label">Aerodrome</label>
    <input type="text" class="form-control" id="aerodrome" name="aerodrome" autocomplete="off" placeholder="Search Aerodrome by name, ICAO or IATA code">
    <ul class="dropdown-menu txtaerodrome" role="menu" aria-labelledby="dropdownMenu"  id="DropdownAerodromes"></ul>
</div>

При вводе #aerodrome скрипт AJAX извлекает данные с удаленного сервера и заполняет неупорядоченный выпадающий список следующим кодом:

 $('#DropdownAerodromes').append(`<li role="presentation" class="dropdown-item"><a role="menuitem dropdownAerodromesli" class="dropdownlivalue"  data-id="${value.ad_id}">${value.name} ${value.municipality} (${value.icao}/${value.iata})</a></li>`);

Я хотел бы заполнить поле ввода #аэродром и скрытый #ad_id выбранным элементом li в выпадающем меню при размытии ввода (например, когда пользователь нажимает клавишу tab, а в выпадающем списке есть выбранная запись)

Приветствуется любая помощь в решении этой проблемы (для меня); большое спасибо

Ответ №1:

Я собрал небольшую скрипку. Это отдельный выпадающий список, которого нет во входных данных, но я думаю, что это то, что вы хотели. https://jsfiddle.net/5d3xkzs0/1 /

 // for keypresses current only tab
// for more keys check https://keycode.info/
$('#DropdownAerodromes').on('keyup', 'li',function(e){
    e.preventDefault();
 
  var code = e.keyCode || e.which;
    
  if (code == 9) { // 9 = tab
    var selected_li = $(this).find('a').html();
    $('#ad_id').val(selected_li);
    $('#aerodrome').val(selected_li);
  }
});

// for normal clicks
$('#DropdownAerodromes li').on('click',function(e){
    e.preventDefault();
  
  var selected_li = $(this).find('a').html();

  $('#ad_id').val(selected_li);
  $('#aerodrome').val(selected_li);
});

РЕДАКТИРОВАТЬ!
Хорошо, я понимаю, что вы имеете в виду / хотели. Создал еще одну скрипку с изменениями, надеюсь, это должно быть хорошо. После того, как вы начнете писать, появится выпадающий список. Вы можете использовать стрелки вверх / вниз для навигации и использовать tab / enter для выбора элемента для вставки в поле. Также работает щелчок. В function populate_field() вы найдете дополнительные data-id и data-aircraftid .

https://jsfiddle.net/dj5ue3b4/

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

1. Большое спасибо за помощь Mikeyhun …. поскольку каждый элемент li имеет идентификатор данных и атрибут data-aircraftId … могу ли я получить их при щелчке по каждому li или при возникновении события размытия поля ввода (например, клавиша табуляции)?

2. @Federico Я обновил свой ответ новой скрипкой. Проверьте это. Надеюсь, это поможет

Ответ №2:

Извините, но я не могу заставить приведенный выше код работать нормально…это потому, что выпадающий список, который у меня есть в моем проекте, работает как список с автоматическим предложением, когда пользователь вводит ввод field…so например, при поиске названия аэродрома выпадающий список будет заполнен соответствующими аэродромами. На этом этапе, используя клавишу up / down, пользователь должен выбрать правильный элемент в списке … и на этом этапе, нажав клавишу tab или нажав на элемент выбора, соответствующие данные должны заполнить поле ввода и скрытый ввод. Еще раз спасибо за любую подсказку