JS---输入框下拉列表的实现_js下拉菜单-优快云博客

本文链接：https://blog.youkuaiyun.com/wangtao_4/article/details/143060626

下拉列表的实现

Html部分
Css样式
Js行为
- oninput事件
- onblur事件

一，准备工作：我们在写一些项目时，一定要将不同语言的代码放在不同的文件中去，养成这样的习惯也有利于快速查找错误，同时代码看起来也更工整，更简洁；所以，先建立三个文件夹，分别用来存放HTML，CSS，JS代码，我这建立的是Xindex.html，Xindex.css，Xindex.js文件夹
二，由于今天的目的是放在js上，所以我这里直接给出Xindex.html和Xindex.css部分的代码,
Xindex.htm如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="./css/Xindex.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/icofont/iconfont.css">
</head>
<body>
    <!-- header start -->
    <div class="header">
        <div class="wrap">
            <div class="form">
                <input type="text" class="keyword" placeholder="小米手机">
                <button class="iconfont">&#xe610;</button>
                <div class="search"></div>
            </div>
        </div>
    </div>
</body>
<script src="./js/Xindex.js"></script>    
    <!-- header end -->

Xindex.css如下

.header{
    width: 100%;
    height: 140px;
    background-color:beige;
}
.wrap{
    width: 1296px;
    margin: 0 auto;
    /* position: relative; */
}
.form{
    width: 550px;
    height: 36px;
    position: absolute;
    left: 578px;
    top: 38px;
    background-color: #fff;
    border: 2px solid red;
}
.keyword{
    width: 425px;
    height: 26px;
    padding: 2px 44px 2px 17px;
    left: 0;
    border: 1px solid transparent;
    line-height: 26px;
    font-size: 12px;
    position: absolute;
    outline: none;
}
.form button{
    width: 50px;
    height: 36px;
    line-height: 36px;
    right: 0;
    background-color: red;
    position: absolute;
    border: none;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    border-left: 2px solid red;
    cursor: pointer;
}
.form button:hover{
    background-color: #fff;
    color: red;
}
.search{
    display: none;
    width: 498px;
    position: absolute;
    /* height: 120px; */
    top: 35px;
    border: 1px solid #f3f3f3;
    overflow: hidden;
    box-shadow: 1px 2px 1px rgb(0 0 0 / 20%);
    background-color: bisque;
}
.search p{
    height: 24px;
    color: #666;
    font-size: 12px;
    line-height:24px;
    cursor: pointer;
    text-align: left;
    padding: 1px 6px;
}
.search p:hover{
    color: #fff;
    background-color: #666;
    box-shadow: 1px 2px 1px rgb(0 0 0 / 20%);
}

三，准备工作和Xindex.html以及Xindex.css部分的代码已经完成，接下来，我们开始js部分，下拉列表部分主要用到两个事件，即oninput事件，onblur事件；
（1）引入；将需要用到的类引入到Xindex.js文件，这里只需引入keyword以及search两个类，如下

let keyword=document.querySelector('.keyword'); //获取输入框的元素内容
let search=document.querySelector('.search'); //获取下拉列表的容器元素

（2）定义数组；由于在下拉列表中需要有内容，所以我们定义一个数组用来存放下拉列表的内容，如下

//定义一个数组用来存放下拉列表的内容
let searchArr=['小米手机','VIVO','OPPO','苹果手机','华为手机','小米平板'];

（3）oninput事件；注意这里是用keyword来触发该事件的，其中search.innerHTML='';是用来清空下拉列表的内容的，

keyword.oninput=function(){//当输入框的内容发生改变时，触发该事件
    search.innerHTML='';
    for(let i=0;i<searchArr.length;i++){ //遍历数组中，查找是否有与之匹配的内容
        if(searchArr[i].indexOf(keyword.value)!=-1){  //判断数组的元素是否包含输入的关键字
            search.innerHTML+='<p>'+searchArr[i]+'</p>'; //将匹配的项以<p>标签的形式添加到下拉列表中
            search.style.display='block';//在下拉列表中展示
        }
    }
}

（4）onblur事件；主要作用就是当鼠标移出keyword时，触发该函数

//失焦
keyword.onblur=function(){
    search.style.display='none';//失去焦点后，下拉列表隐藏
}

至此，一个简单的下拉列表就完成了；由于笔者也是初学者，某些注释可能不合理，某些代码也可能有bug，若有错误，还请读者们及时与我沟通啊，同时，下一篇文章也会用到该篇文章中的部分代码；