Javascript 在自动建议中使用Bootstrap 4卡

我在autosuggestion中使用Bootstrap 4卡，一切正常，但我面临一个问题，当用户在输入框中键入a或b等内容时，所有相关建议都显示出来，但我无法使用autosuggestion列表中的键盘按钮上下移动，我搜索了几个小时，但我没有得到任何完美的解决方案。请参见下图中的工作示例

这是HTML代码

<div class="col-4 pr-5">
                <input type="text" class="form-control" id="search-data" placeholder="Type to Search...">
  <div class="card autosuggest" style="width: 33.5rem; display:none">
     <ul class="list-group list-group-flush">
     </ul>
  </div>

Jquery代码

$(document).on('keyup', '.test', function () {

var value = $('.test').val();

$.ajax({
    url: "get-data.php",
    type: "POST",
    data: {
        val: value
    },
    cache: false,
    success: function (res) {
        if (value != '') {
            if (res.length === 0) {
                $('.list-group-flush').html('')
                $('.list-group-flush').append('<li class="list-group-item">No Results Found</li>');
            } else {
                $('.autosuggest').show();
                $('.list-group-flush').html('')
                $('.list-group-flush').html(res)
            }
        } else {
            $('.autosuggest').hide();
            $('.list-group-flush').html('')
        }
    }
});
});

$（document）.on（'keyup'，'.test'，函数（）{
var值=$（'.test'）.val（）；
$.ajax({
url:“get data.php”，
类型：“POST”，
数据：{
瓦尔：价值
},
cache:false，
成功：功能（res）{
如果（值！=''）{
if（res.length==0）{
$（'.list group flush'）.html（''）
$（“.list group flush”）.append（“
未找到结果”）；
}否则{
$（'.autosuggest'）.show（）；
$（'.list group flush'）.html（''）
$（'.list group flush'）.html（res）
}
}否则{
$（'.autosuggest'）.hide（）；
$（'.list group flush'）.html（''）
}
}
});
});

这似乎不是jQuery UI的问题。这似乎是某种类型的自定义列表。如果您希望使用jQueryUI，请提供适当的示例。