原生js、html、css實現自定義select框（帶搜索框和滾動條）

效果展示

功能描述

如效果所見，它可以實現一般的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: 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>