input下拉框搜索框

最新推荐文章于 2026-03-28 02:21:42 发布

原创

最新推荐文章于 2026-03-28 02:21:42 发布 · 3.8k 阅读

收录于

这篇博客详细介绍了如何创建一个交互式的HTML输入下拉搜索框，包括使用CSS进行样式设计，JavaScript处理用户交互，如键盘上下移动选择、点击高亮及隐藏显示控制。通过监听键盘事件和鼠标事件，实现下拉列表的动态更新和滚动效果。

input下拉框搜索框

html 代码如下：

 <div class="container">
        <input type="text" name="" id="inputVal">
        <ul class="ulList">
            <li class="first">测试0</li>
            <li>测试1</li>
            <li>测试2</li>
            <li>测试3</li>
            <li>测试4</li>
            <li>测试5</li>
            <li>测试6</li>
            <li>测试7</li>
            <li>测试8</li>
            <li>测试9</li>

        </ul>
    </div>

css代码如下：

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .container {
        width: 300px;
        margin: 50px auto;
        /* background: red; */
    }

    ul,
    li {
        list-style: none;
    }

    li {
        padding: 6px 10px;
    }

    .ulList {
        display: none;
        background: #ececec;
        hei