搜索下拉建议

Question

是否有更好的方法来构建一个带有下拉列表的输入框，以获取除以下内容之外的建议？

<div id="dropdown-group" class="input-group dropdown">
    <input id="keyword" type="search" class="form-control">

    <ul id="suggestion-list" class="dropdown-menu">
        <li>
            <a href="link">
                <img class="img-sm" src="img_path">
                <span>name</span>
            </a>
        </li>
    </ul>
</ul>

input-group，dropdown，form-control和dropdown-menu都是 bootstrap 类。 当用户在搜索输入字段（vuejs）中输入时，我使用ajax和#suggestion-list来填充无序列表（#keyword）。 我还会听取输入丢失并获得焦点，我添加并删除 bootstrap 类open以打开和关闭下拉列表。我故意跳过javascript代码，专注于html和css。

缺少的是点击向下箭头键以浏览建议列表的功能。

有没有更好的方法来设计这样的清单？

Answer 1

this怎么样？在行动here中查看。无论你想做什么，总会有人更聪明，更快，已经完成了。