Native js, html, css to realize custom select box (with search box and scroll bar)
Show results
Function description
As you can see, it can realize the general select function, and it also has a search function, and you can quickly search by entering keywords .
In order to make it applicable in practice, I also wrote a normal select synchronously for him. When the value of this custom select box is modified, the normal select is also modified to meet the needs of form submission.
Listen to my thoughts next!
Idea analysis
- Normal select is hidden after being written out, and used for form submission
- Use div to imitate the function of select to write a copy
- Limit the height of the value-body of the div so that the scroll bar appears automatically
- Use the oninput event of input to search for conditions in real time, and the values that do not match are hidden
Code reference
-
Prepare three pictures
-
The code is
superficial, and it is common for the code to appear incompatible, but I have tested the latest versions of Firefox, Chrome and QQ browsers to be compatible with their functions.
<!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: 150px;
overflow: auto;
}
div.value-body li{
display: flex;
height: 24px;
padding: 5px 5px;
font-size: 14px;
align-items: center;
cursor: pointer;
}
div.value-body li:hover,li.active{
background-color: #F5F6FA;
}
div.value-body li.none,div.none{
display: none;
}
div.value-body div{
text-align: center;
height: 30px;
line-height: 30px;
color: #AAA;
}
</style>
<script type="text/javascript">
window.onload = function () {
//清空select的value
document.querySelector('div.select>select').value = ''
/**
* 点击自定义的select框开启或收回选择框
*/
document.querySelector('div.select-head').onclick = function () {
//清空输入框内容
document.querySelector('div.search-input>input').value = ''
document.querySelectorAll('div.value-body>li').forEach( function(element, index) {
if (element.classList.contains('active')) {
element.classList = 'active'
}else {
element.classList = ''
}
});
document.querySelector('div.value-body>div').classList = 'none'
var select_body = document.querySelector('div.select-body')
if (select_body.style.display == 'block')
select_body.style.display = 'none'
else
select_body.style.display = 'block'
};
/**
* 点击空白处关闭select框
*/
document.onclick = function (argument) {
if(!argument.target.classList.contains('s')){
var select_body = document.querySelector('div.select-body')
if (select_body.style.display == 'block')
select_body.style.display = 'none'
}
}
/**
* 自定义的select的选值功能
*/
document.querySelectorAll('div.value-body>li').forEach( function(element, index) {
element.onclick = function () {
//初始化下样式
document.querySelectorAll('div.value-body>li').forEach( function(element, index) {
element.classList = ''
});
element.classList = 'active'
//更新select框的value和自定义的select框的value
var data_value = element.getAttribute('data-value')
var select_head_span = document.querySelector('div.select-head>span')
document.querySelector('div.select>select').value = data_value
select_head_span.innerHTML = data_value
if(!select_head_span.classList.contains('fill'))
select_head_span.classList = 'fill'
//关闭select-body
document.querySelector('div.select-body').style.display = 'none'
}
});
/**
* 搜素功能实现
*/
document.querySelector('div.search-input>input').oninput = function () {
var input_value = document.querySelector('div.search-input>input').value
if(input_value == '') {
document.querySelectorAll('div.value-body>li').forEach( function(element, index) {
if (element.classList.contains('active')) {
element.classList = 'active'
}else {
element.classList = ''
}
});
}else{
document.querySelectorAll('div.value-body>li').forEach( function(element, index) {
if(element.getAttribute('data-value').indexOf(input_value) == -1){
if (element.classList.contains('active')) {
element.classList += ' none'
}else {
element.classList = 'none'
}
}else {
if(element.classList.contains('none')) {
document.querySelectorAll('div.value-body>li').forEach( function(element, index) {
if (element.classList.contains('active')) {
element.classList = 'active'
}else {
element.classList = ''
}
});
}
}
});
}
//记一下结果数量
var length = 0
document.querySelectorAll('div.value-body>li').forEach( function(element, index) {
if (!element.classList.contains('none')) length++
});
if (length == 0) {
document.querySelector('div.value-body>div').classList = ''
}else{
document.querySelector('div.value-body>div').classList = 'none'
}
}
};
</script>
</head>
<body>
<div class="select">
<select name="select-name">
<option value="" disabled="true">请选择</option>
<option value="选择1">选择1</option>
<option value="选择2">选择2</option>
<option value="选择3">选择3</option>
<option value="选择4">选择4</option>
<option value="选择5">选择5</option>
<option value="选择6">选择6</option>
<option value="选择7">选择7</option>
<option value="选择8">选择8</option>
<option value="选择9">选择9</option>
<option value="选择10">选择10</option>
</select>
<div class="s select-box">
<div class="s select-head">
<span class="s">请选择</span>
<i class="s"></i>
</div>
<div class="s select-body">
<div class="s search-input">
<input class="s" type="text" placeholder="搜索">
<i class="s"></i>
</div>
<div class="s value-body">
<li data-value="选择1">选择1</li>
<li data-value="选择2">选择2</li>
<li data-value="选择3">选择3</li>
<li data-value="选择4">选择4</li>
<li data-value="选择5">选择5</li>
<li data-value="选择6">选择6</li>
<li data-value="选择7">选择7</li>
<li data-value="选择8">选择8</li>
<li data-value="选择9">选择9</li>
<li data-value="选择10">选择10</li>
<div class="none">暂无匹配选项</div>
</div>
</div>
</div>
</div>
</body>
</html>
Recommended by other articles in this blog
html page jumps within the page by id