jQuery带搜索过滤下拉列表框js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery带搜索过滤下拉列表框js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery带搜索过滤下拉列表框</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/zzsc-demo.css">
<link rel="stylesheet" href="css/fm.selectator.jquery.css"/>
<style>
	/*body {
		font-family: sans-serif;
		margin: 0;
		padding: 0;
	}*/
	label {
		display: block;
		margin-bottom: 5px;
	}
	#wrapper {
		padding: 15px;
	}
	#select1 {
		width: 250px;
		padding: 7px 10px;
	}
	#select2 {
		padding: 5px;
		width: 350px;
		height: 36px;
	}
	#select3 {
		width: 350px;
		height: 36px;
	}		
	#select4 {
		width: 350px;
		height: 36px;
	}		
	#select5 {
		width: 350px;
		height: 50px;
	}		
	#select6 {
		width: 350px;
		height: 36px;
	}		
	#select7 {
		width: 350px;
		height: 36px;
	}		
</style>
</head>
<body>
<div class="zzsc-container">
	<div class="zzsc-content">
		<div id="wrapper">
			<label for="select1">
				Singular select with custom content:
			</label>
			<select id="select1" name="select1">
				<option value="">&nbsp;</option>
				<option value="1" data-subtitle="Et" data-left="<img src='images/ingi.png'>" data-right="1">One</option>
				<option value="2" data-subtitle="To" data-left="<img src='images/runa.png'>" data-right="2">Two</option>
				<option value="3" data-subtitle="Tre" data-left="<img src='images/jogvan.png'>" data-right="3">Three</option>
				<option value="4" data-left="<img src='images/noimage.png'>" data-right="4">Four</option>
				<option value="5" data-left="<img src='images/noimage.png'>" data-right="5">Five</option>
				<option value="6">Six</option>
				<option value="7">Seven</option>
				<option value="8">Eight</option>
				<option value="9">Nine</option>
				<option value="10">Ten</option>
				<option value="11">Eleven</option>
				<option value="12">Twelve</option>
				<option value="13">Thirteen</option>
				<option value="14">Fourteen</option>
				<option value="15">Fifteen</option>
				<option value="16">Sixteen</option>
				<option value="17">Seventeen</option>
				<option value="18">Eighteen</option>
				<option value="19">Nineteen</option>
				<option value="20">Twenty</option>
				<option value="21">Twenty-one</option>
				<option value="22">Twenty-two</option>
				<option value="23">Twenty-three</option>
				<option value="24">Twenty-four</option>
				<option value="25">Twenty-five</option>
				<option value="26">Twenty-six</option>
				<option value="27">Twenty-seven</option>
				<option value="28">Twenty-eight</option>
				<option value="29">Twenty-nine</option>
				<option value="30">Thirty</option>
			</select>
			<input value="activate selectator" id="activate_selectator1" type="button">
			<br>
			<br>


			<label for="select2">
				Singular select with dimmer:
			</label>
			<select id="select2" name="select2">
				<option value="1" class="option_one">One</option>
				<option value="2" class="option_two">Two</option>
			</select>
			<input value="activate selectator" id="activate_selectator2" type="button">
			<br>
			<br>


			<label for="select3">
				Singular select without search:
			</label>
			<select id="select3" name="select3">
				<option value="1">One</option>
				<option value="2">Two</option>
			</select>
			<input value="activate selectator" id="activate_selectator3" type="button">
			<br>
			<br>


			<label for="select4">
				Multi select with custom content:
			</label>
			<select id="select4" name="select4" multiple>
				<optgroup label="Group one" class="group_one">
					<option value="1" class="option_one" data-subtitle="Et" data-left="<img src='images/ingi.png'>" data-right="1">One</option>
					<option value="2" class="option_two" data-subtitle="To" data-left="<img src='images/runa.png'>" data-right="2">Two</option>
				</optgroup>
				<optgroup label="Group two" class="group_two">
					<option value="3" class="option_three" data-subtitle="Tre" data-left="<img src='images/jogvan.png'>" data-right="3">Three</option>
					<option value="4" class="option_four" selected data-left="<img src='images/noimage.png'>" data-right="4">Four</option>
					<option value="5" class="option_five" selected data-left="<img src='images/noimage.png'>" data-right="5">Five</option>
					<option value="6" class="option_six">Six</option>
				</optgroup>
				<optgroup label="Group three" class="group_three">
					<option value="7" class="option_seven">Seven</option>
				</optgroup>
				<option value="8" class="option_eight" data-subtitle="Otte">Eight</option>
				<option value="9" class="option_nine">Nine</option>
				<option value="10" class="option_ten" selected>Ten</option>
				<option value="11" class="option_eleven" selected>Eleven</option>
				<option value="12" class="option_twelve">Twelve</option>
				<option value="13" class="option_thirteen">Thirteen</option>
				<option value="14" class="option_fourteen">Fourteen</option>
			</select>
			<input value="activate selectator" id="activate_selectator4" type="button">
			<br>
			<br>


			<label for="select5">
				Multi select with custom content and without search:
			</label>
			<select id="select5" name="select5" multiple>
				<optgroup label="Group one">
					<option value="1" data-subtitle="Et" data-left="<img src='images/ingi.png'>" data-right="1">One</option>
					<option value="2" selected  data-subtitle="To" data-left="<img src='images/runa.png'>" data-right="2">Two</option>
				</optgroup>
				<optgroup label="Group two">
					<option value="3" data-subtitle="Tre" data-left="<img src='images/jogvan.png'>" data-right="3">Three</option>
					<option value="4" data-left="<img src='images/noimage.png'>" data-right="4">Four</option>
					<option value="5" data-left="<img src='images/noimage.png'>" data-right="5">Five</option>
					<option value="6">Six</option>
				</optgroup>
				<optgroup label="Group three">
					<option value="7">Seven</option>
				</optgroup>
				<option value="8" data-subtitle="Otte">Eight</option>
				<option value="9">Nine</option>
				<option value="10">Ten</option>
				<option value="11">Eleven</option>
				<option value="12">Twelve</option>
				<option value="13" selected>Thirteen</option>
				<option value="14">Fourteen</option>
			</select>
			<input value="activate selectator" id="activate_selectator5" type="button">
			<br>
			<br>


			<label for="select6">
				Multi select with custom content and keep open:
			</label>
			<select id="select6" name="select6" multiple>
				<optgroup label="Group one" class="group_one">
					<option value="1" class="option_one" data-subtitle="Et" data-left="<img src='images/ingi.png'>" data-right="1">One</option>
					<option value="2" class="option_two" data-subtitle="To" data-left="<img src='images/runa.png'>" data-right="2">Two</option>
				</optgroup>
				<optgroup label="Group two" class="group_two">
					<option value="3" class="option_three" data-subtitle="Tre" data-left="<img src='images/jogvan.png'>" data-right="3">Three</option>
					<option value="4" class="option_four" selected data-left="<img src='images/noimage.png'>" data-right="4">Four</option>
					<option value="5" class="option_five" selected data-left="<img src='images/noimage.png'>" data-right="5">Five</option>
					<option value="6" class="option_six">Six</option>
				</optgroup>
				<optgroup label="Group three" class="group_three">
					<option value="7" class="option_seven">Seven</option>
				</optgroup>
				<option value="8" class="option_eight" data-subtitle="Otte">Eight</option>
				<option value="9" class="option_nine">Nine</option>
				<option value="10" class="option_ten" selected>Ten</option>
				<option value="11" class="option_eleven" selected>Eleven</option>
				<option value="12" class="option_twelve">Twelve</option>
				<option value="13" class="option_thirteen">Thirteen</option>
				<option value="14" class="option_fourteen">Fourteen</option>
			</select>
			<input value="activate selectator" id="activate_selectator6" type="button">
			<br>
			<br>


			<label for="select7">
				Inline markup initialized
			</label>
			<pre>&lt;select multiple class=&quot;selectator&quot; data-selectator-keep-open=&quot;true&quot;&gt;</pre>
			<select id="select7" name="select6" multiple class="selectator" data-selectator-keep-open="true">
				<optgroup label="Group one" class="group_one">
					<option value="1" class="option_one" data-subtitle="Et" data-left="<img src='images/ingi.png'>" data-right="1">One</option>
					<option value="2" class="option_two" data-subtitle="To" data-left="<img src='images/runa.png'>" data-right="2">Two</option>
				</optgroup>
				<optgroup label="Group two" class="group_two">
					<option value="3" class="option_three" data-subtitle="Tre" data-left="<img src='images/jogvan.png'>" data-right="3">Three</option>
					<option value="4" class="option_four" selected data-left="<img src='images/noimage.png'>" data-right="4">Four</option>
					<option value="5" class="option_five" selected data-left="<img src='images/noimage.png'>" data-right="5">Five</option>
					<option value="6" class="option_six">Six</option>
				</optgroup>
				<optgroup label="Group three" class="group_three">
					<option value="7" class="option_seven">Seven</option>
				</optgroup>
				<option value="8" class="option_eight" data-subtitle="Otte">Eight</option>
				<option value="9" class="option_nine">Nine</option>
				<option value="10" class="option_ten" selected>Ten</option>
				<option value="11" class="option_eleven" selected>Eleven</option>
				<option value="12" class="option_twelve">Twelve</option>
				<option value="13" class="option_thirteen">Thirteen</option>
				<option value="14" class="option_fourteen">Fourteen</option>
			</select>
			<br>
			<br>

		</div>
	</div>
</div>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/fm.selectator.jquery.js"></script>
<script>
	$(function () {
		var $activate_selectator1 = $('#activate_selectator1');
		$activate_selectator1.click(function () {
			var $select1 = $('#select1');
			if ($select1.data('selectator') === undefined) {
				$select1.selectator({
					labels: {
						search: 'Search here...'
					}
				});
				$activate_selectator1.val('destroy selectator');
			} else {
				$select1.selectator('destroy');
				$activate_selectator1.val('activate selectator');
			}
		});
		$activate_selectator1.trigger('click');

		var $activate_selectator2 = $('#activate_selectator2');
		$activate_selectator2.click(function () {
			var $select2 = $('#select2');
			if ($select2.data('selectator') === undefined) {
				$select2.selectator({
					useDimmer: true
				});
				$activate_selectator2.val('destroy selectator');
			} else {
				$select2.selectator('destroy');
				$activate_selectator2.val('activate selectator');
			}
		});
		$activate_selectator2.trigger('click');

		var $activate_selectator3 = $('#activate_selectator3');
		$activate_selectator3.click(function () {
			var $select3 = $('#select3');
			if ($select3.data('selectator') === undefined) {
				$select3.selectator({
					useSearch: false
				});
				$activate_selectator3.val('destroy selectator');
			} else {
				$select3.selectator('destroy');
				$activate_selectator3.val('activate selectator');
			}
		});
		$activate_selectator3.trigger('click');

		var $activate_selectator4 = $('#activate_selectator4');
		$activate_selectator4.click(function () {
			var $select4 = $('#select4');
			if ($select4.data('selectator') === undefined) {
				$select4.selectator({
					showAllOptionsOnFocus: true
				});
				$activate_selectator4.val('destroy selectator');
			} else {
				$select4.selectator('destroy');
				$activate_selectator4.val('activate selectator');
			}
		});
		$activate_selectator4.trigger('click');

		var $activate_selectator5 = $('#activate_selectator5');
		$activate_selectator5.click(function () {
			var $select5 = $('#select5');
			if ($select5.data('selectator') === undefined) {
				$select5.selectator({
					useSearch: false
				});
				$activate_selectator5.val('destroy selectator');
			} else {
				$select5.selectator('destroy');
				$activate_selectator5.val('activate selectator');
			}
		});
		$activate_selectator5.trigger('click');

		var $activate_selectator6 = $('#activate_selectator6');
		$activate_selectator6.click(function () {
			var $select6 = $('#select6');
			if ($select6.data('selectator') === undefined) {
				$select6.selectator({
					showAllOptionsOnFocus: true,
					keepOpen: true
				});
				$activate_selectator6.val('destroy selectator');
			} else {
				$select6.selectator('destroy');
				$activate_selectator6.val('activate selectator');
			}
		});
		$activate_selectator6.trigger('click');
	});
</script>
</body>
</html>

CSS代码(zzsc-demo.css):

@import url(http://fonts.useso.com/css?family=Raleway:200,500,700,800);@font-face{font-family:'icomoon';src:url('../fonts/icomoon.eot?rretjt');src:url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'),url('../fonts/icomoon.woff?rretjt') format('woff'),url('../fonts/icomoon.ttf?rretjt') format('truetype'),url('../fonts/icomoon.svg?rretjt#icomoon') format('svg');font-weight:normal;font-style:normal;}
[class^="icon-"],[class*=" icon-"]{font-family:'icomoon';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;/* Better Font Rendering =========== */
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
body,html{font-size:100%;padding:0;margin:0;}
/* Reset */
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{font-weight:500;font-size:1.05em;font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
a{color:#2fa0ec;text-decoration:none;outline:none;}
a:hover,a:focus{color:#74777b;}
.zzsc-container{margin:0 auto;overflow:hidden;}
.zzsc-content{width:600px;margin:0 auto;}
.bgcolor-1{background:#f0efee;}
.bgcolor-2{background:#f9f9f9;}
.bgcolor-3{background:#e8e8e8;}
/*light grey*/
.bgcolor-4{background:#2f3238;color:#fff;}
/*Dark grey*/
.bgcolor-5{background:#df6659;color:#521e18;}
/*pink1*/
.bgcolor-6{background:#2fa8ec;}
/*sky blue*/
.bgcolor-7{background:#d0d6d6;}
/*White tea*/
.bgcolor-8{background:#3d4444;color:#fff;}
/*Dark grey2*/
.bgcolor-9{background:#ef3f52;color:#fff;}
/*pink2*/
.bgcolor-10{background:#64448f;color:#fff;}
/*Violet*/
.bgcolor-11{background:#3755ad;color:#fff;}
/*dark blue*/
.bgcolor-12{background:#3498DB;color:#fff;}
/*light blue*/
.bgcolor-20{background:#494A5F;color:#D5D6E2;}
/* Header */
.zzsc-header{padding:1em 190px 1em;letter-spacing:-1px;text-align:center;background:#66677c;}
.zzsc-header h1{color:#D5D6E2;font-weight:600;font-size:2em;line-height:1;margin-bottom:0;font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
.zzsc-header h1 span{font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;display:block;font-size:60%;font-weight:400;padding:0.8em 0 0.5em 0;color:#c3c8cd;}
/*nav*/
.zzsc-demo a{color:#fff;text-decoration:none;}
.zzsc-demo{width:100%;padding-bottom:1.2em;}
.zzsc-demo a{display:inline-block;margin:0.5em;padding:0.6em 1em;border:3px solid #fff;font-weight:700;}
.zzsc-demo a:hover{opacity:0.6;}
.zzsc-demo a.current{background:#1d7db1;color:#fff;}
/* Top Navigation Style */
.zzsc-links{position:relative;display:inline-block;white-space:nowrap;font-size:1.5em;text-align:center;}
.zzsc-links::after{position:absolute;top:0;left:50%;margin-left:-1px;width:2px;height:100%;background:#dbdbdb;content:'';-webkit-transform:rotate3d(0,0,1,22.5deg);transform:rotate3d(0,0,1,22.5deg);}
.zzsc-icon{display:inline-block;margin:0.5em;padding:0em 0;width:1.5em;text-decoration:none;}
.zzsc-icon span{display:none;}
.zzsc-icon:before{margin:0 5px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;font-family:'icomoon';line-height:1;speak:none;-webkit-font-smoothing:antialiased;}
/* footer */
.zzsc-footer{width:100%;padding-top:10px;}
.zzsc-small{font-size:0.8em;}
.center{text-align:center;}
/****/
.related{color:#fff;background:#494A5F;text-align:center;font-size:1.25em;padding:0.5em 0;overflow:hidden;}
.related > a{vertical-align:top;width:calc(100% - 20px);max-width:340px;display:inline-block;text-align:center;margin:20px 10px;padding:25px;font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
.related a{display:inline-block;text-align:left;margin:20px auto;padding:10px 20px;opacity:0.8;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;-webkit-backface-visibility:hidden;}
.related a:hover,.related a:active{opacity:1;}
.related a img{max-width:100%;opacity:0.8;border-radius:4px;}
.related a:hover img,.related a:active img{opacity:1;}
.related h3{font-family:"Microsoft YaHei",sans-serif;}
.related a h3{font-weight:300;margin-top:0.15em;color:#fff;}
/* icomoon */
.icon-zzsc-home-outline:before{content:"\e5000";}
.icon-zzsc-arrow-forward-outline:before{content:"\e5001";}
@media screen and (max-width:50em){.zzsc-header{padding:3em 10% 4em;}
.zzsc-header h1{font-size:2em;}
}
@media screen and (max-width:40em){.zzsc-header h1{font-size:1.5em;}
}
@media screen and (max-width:30em){.zzsc-header h1{font-size:1.2em;}
}

附件:下载该文件资源,减少时间成本(增值服务)