效果展示
功能描述
如效果所见,它可以实现一般的select功能的同时,还附加搜索功能,输入关键词即可快捷搜索。
为了使其可以应用于实际,我还给他同步写了一个普通select,当此自定义select框的值修改时,普通select也跟着修改,可以满足表单提交的需求。
接下来听听我的思路吧!
思路解析
- 普通select写出后隐藏,做表单提交之用
- 用div模仿select的功能写出一个复制体
- 给div的value-body限制高度使其自动出现滚动条
- 用input的oninput事件实时搜索条件,不符的值隐藏
代码参考
-
准备图片三张
-
代码
本人粗浅,代码出现不兼容状况实属常事,不过本人已测试火狐、Chrome、QQ浏览器最新版本兼容其功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
width: 100vw;
height: calc(100vh - 20px);
}
div.select select{
display: none;
}
div.select-box{
width: 200px;
margin: 20px 20px;
}
div.select-head{
position: relative;
height: 30px;
width: 100%;
display: flex;
border: solid 1px #000;
align-items: center;
cursor: pointer;
}
div.select-head span{
font-size: 16px;
margin-left: 5px;
color: #AAA;
}
div.select-head span.fill{
color: #000;
}
div.select-head i{
position: absolute;
height: 16px;
width: 16px;
right: 5px;
background-image: url(./arrow.png);
background-size: 16px auto;
}
div.select-body{
display: none;
width: 100%;
border: solid 1px #000;
border-top: none;
}
div.search-input{
position: relative;
height: 40px;
}
div.search-input input{
height: 30px;
width: 150px;
margin: 5px 8px;
text-indent: 10px;
padding-right: 30px;
}
div.search-input i{
position: absolute;
display: block;
height: 20px;
width: 20px;
top: 12px;
right: 15px;
background-image: url(./search-normal.png);
background-size: 20px 20px;
cursor: pointer;
}
div.search-input i:hover{
background-image: url(./search-active.png);
}
div.value-body{
max-height