使用jQuery从输入模糊的下拉列表中选择项目答案

【问题标题】：Select item from dropdown list on input blur using jQuery使用jQuery从输入模糊的下拉列表中选择项目
【发布时间】：2020-09-26 16:36:55
【问题描述】：

在我的项目中，我在输入文本用户条目上使用下拉菜单（引导程序 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 input keyup 上，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>`);

我想在输入模糊的下拉菜单中用选定的 li 项填充输入#aerodrome 字段和隐藏的#ad_id（例如，当用户按 Tab 键并且下拉菜单中有一个选定条目时）

感谢任何帮助解决这个苦苦挣扎的问题（对我来说）；非常感谢

【问题讨论】：

标签： jquery ajax input

【解决方案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/

【讨论】：

非常感谢 Mikeyhun 的帮助....因为每个 li 项目都有一个 data-id 和一个 data-aircraftId 属性...我可以在点击每个 li 时获得这些吗？发生输入字段模糊（例如 tab 键）事件？
@Federico 我用一个新的小提琴更新了我的答案。看看这个。希望这会有所帮助

【解决方案2】：

抱歉，我无法让上面的代码正常工作...这是因为当用户填写输入字段时，我的项目中的下拉列表就像一个自动建议列表...所以，对于例如，查找机场名称，下拉列表将填充相应的机场。此时，使用向上/向下键，用户应该在列表中选择正确的项目......并且，此时，按 Tab 键或单击选择项目，相应的数据应该填充输入字段和隐藏输入。再次感谢您的任何提示

【讨论】：