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

Question

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

在#airport 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项目填充输入#airport字段和隐藏的#ad_id(例如，当用户按下tab键，下拉菜单中有一个选定的条目时(

感谢任何帮助来解决这个困难的问题(对我来说(；非常感谢

Answer 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/

Answer 2

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