css - 搜索下拉建议

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 在用户在搜索输入字段 ( #关键字)。我还听取丢失的输入并获得焦点，我在其中添加和删除 bootstrap 类 open 以打开和关闭下拉列表。我故意跳过 javascript 代码以专注于 html 和 css。

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

有没有更好的方法来设计这样的列表？

Answer 1

this呢？ .查看实际效果 here .不管您想做什么，总有人比您更聪明、速度更快，并且已经完成了。