input下拉框搜索框

最新推荐文章于 2024-07-31 10:29:53 发布

阳光&彩虹

最新推荐文章于 2024-07-31 10:29:53 发布

阅读量3.7k

点赞数

本文链接：https://blog.csdn.net/snrainbow/article/details/103834141

版权

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

摘要由CSDN通过智能技术生成

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