以下是 带搜索过滤ajax加载下拉框代码 的示例演示效果:
部分效果截图:
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>带搜索过滤ajax加载下拉框代码</title>
<link rel="stylesheet" type="text/css" href="css/zzsc-demo.css">
<link rel="stylesheet" href="css/tinyselect.css">
</head>
<body>
<div class="zzsc-container">
<div class="zzsc-content">
<div class="row">
<div class="cell">
<div class="desc">这个例子使用静态的选项数据</div>
<select id="select1" style="width: 100%;">
<option value="-1">option a</option>
<option value="1">option b</option>
<option value="2">option c</option>
<option value="3">option d</option>
<option value="4">option e</option>
<option value="5">option f</option>
<option value="6">option g</option>
<option value="7">option h</option>
</select>
</div>
<div class="cell">
<div class="desc">这个例子不提供搜索过滤功能</div>
<select id="select2" style="width: 100%;">
<option value="-1">option a</option>
<option value="1">option b</option>
<option value="2" selected>option c</option>
<option value="3">option d</option>
<option value="4">option e</option>
<option value="5">option f</option>
<option value="6">option g</option>
<option value="7">option h</option>
</select>
</div>
</div>
<div class="row">
<div class="cell">
<div class="desc">这个例子从file.json加载数据。不带初始选项。带搜索过滤功能。</div>
<select id="select3" style="width: 100%;">
<option value="-1">---</option>
</select>
</div>
<div class="cell">
<div class="desc">这个例子从file.json加载数据。带初始选项。不带搜索过滤功能。</div>
<select id="select5" style="width: 340px;">
<option value="1">abc</option>
</select>
</div>
</div>
<div class="row">
<div class="cell">
<div class="desc">Note: 插件在json数据格式不正确时会得到错误的结果。</div>
<select id="select4">
<option value="-1">---</option>
</select>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/tinyselect.js"></script>
<script>
/* This parser won't respect "---" selection */
function dataParserA(data, selected) {
retval = [ { val: "-1" , text: "---" } ];
data.forEach(function(v){
if(selected == "-1" && v.val == 3)
v.selected = true;
retval.push(v);
});
return retval;
}
/* This parser let's the component to handle selection */
function dataParserB(data, selected) {
retval = [ { val: "-1" , text: "---" } ];
data.forEach(function(v){ retval.push(v); });
return retval;
}
/* Create select elements */
$("#select1").tinyselect();
$("#select2").tinyselect({ showSearch: false });
$("#select3").tinyselect({ dataUrl: "file.json" , dataParser: dataParserA });
$("#select4").tinyselect({ dataUrl: "failure.json" });
$("#select5").tinyselect({ dataUrl: "file.json" , dataParser: dataParserB });
$("#select2").on("change",function() {
console.log($(this).val());
});
$("#havoc").show()
</script>
</body>
</html>JS代码(tinyselect.js):
/* * tinySelect * * Licensed under MIT license. * * @version 1.0.4 * @author Pekka Harjamäki */
;
(function($){
"use strict";
var TinySelect ={
/* ******************************************************************* * * Class initializers * ******************************************************************* */
init:function($el,options){
$el.data("tinySelectObj",this);
this.config = $.extend({
showSearch:true,txtLoading:"Loading...",txtAjaxFailure:"Error...",dataUrl:null,dataParser:null}
,options);
this.state ={
container:null,selectBox:null,itemContainer:null,searchContainer:null,searchBox:null,$el:null,open:false,ajaxPending:false,selectedValue:-1,originalItemData:[],filteredItemData:[]}
;
this.readSelect($el);
this.createSelect($el);
}
,createSelect:function($el){
// Create container for select,search and optionsthis.state.container = $("<div></div>").addClass("tinyselect").css({
width:$el.css("width")}
);
// Create the select elementthis.state.selectBox = $("<div></div>").addClass("selectbox").on("click",{
self:this}
,this.onSelectBoxClicked );
this.state.container.append(this.state.selectBox);
// Create container to hold search and resultsthis.state.dropdown = $("<div></div>").addClass("dropdown").hide();
this.state.container.append(this.state.dropdown);
// Add search as first elementif(this.config.showSearch)this.createSearch(this.state.dropdown);
// Create ul to hold itemsthis.state.itemContainer = $("<ul></ul>").addClass("itemcontainer");
this.state.dropdown.append(this.state.itemContainer);
//this.createItems();
// Hide original select element and add new component to below$el.hide().after(this.state.container);
this.state.$el = $el;
// Hide select content when clicked elsewhere in the document$(document).on("click",{
self:this}
,this.onDocumentClicked );
}
,createItems:function(selected){
var l1,opt;
// Remove allthis.state.itemContainer.empty();
//for(l1=0;
l1<this.state.filteredItemData.length;
l1++){
opt = this.state.filteredItemData[l1];
var newLi = $("<li></li>").text( opt.text ).addClass( "item" ).attr( "data-value",opt.val );
if( opt.val == this.state.selectedValue ){
this.state.selectBox.html( opt.text );
newLi.addClass("selected");
}
newLi.on("click",{
self:this}
,this.onSelectLiClicked );
this.state.itemContainer.append(newLi);
}
}
,createSearch:function($el){
this.state.searchContainer = $("<div></div>").addClass("searchcontainer");
this.state.searchBox = $("<input type='text'></input>").addClass("searchbox").on("click",function(e){
e.stopPropagation();
}
).on("keyup",{
self:this}
,this.onSearchKeyPress);
this.state.searchContainer.append($("<span class='searchicon'></span>"));
this.state.searchContainer.append(this.state.searchBox);
this.state.dropdown.append(this.state.searchContainer);
}
,readSelect:function($el){
var self = this;
$el.find("option").each(function(index){
var opt = $(this);
self.state.originalItemData.push({
val:opt.val(),text:opt.text()}
);
}
);
this.state.filteredItemData = this.state.originalItemData;
this.state.selectedValue = $el.val();
}
,setAjaxIndicator:function(failure){
this.state.ajaxPending = true;
this.state.itemContainer.empty();
if(this.state.searchContainer !== null)this.state.searchContainer.hide();
var newLi = $("<li></li>");
if(!failure){
newLi.text( this.config.txtLoading ).addClass( "loadindicator" );
}
else{
newLi.text( this.config.txtAjaxFailure ).addClass( "loaderrorindicator" );
}
this.state.itemContainer.append(newLi);
}
,/* ******************************************************************* * * Event handlers * ******************************************************************* */
onDocumentClicked:function(e){
var self = e.data.self;
if( self.state.open )self.onSelectBoxClicked(e);
}
,onSearchKeyPress:function(e){
var self = e.data.self,sval = $(e.currentTarget).val();
if(sval.length === 0){
self.state.filteredItemData = self.state.originalItemData;
}
else{
self.state.filteredItemData = self.state.originalItemData.filter(function(item){
return item.text.toLowerCase().indexOf(sval) >= 0 ? true:false;
}
);
}
self.createItems();
}
,onSelectBoxClicked:function(e){
var self = e.data.self;
// Do nothing,if currently animatingif(self.state.dropdown.is(":animated"))return;
// Close selectBoxif( self.state.open ){
self.state.open = false;
self.state.selectBox.removeClass("open");
self.state.dropdown.slideUp(100);
return;
}
// Open selectboxif(self.config.dataUrl !== null){
self.setAjaxIndicator(false);
$.ajax({
url:self.config.dataUrl,dataType:"json",type:"GET"}
).done( function(data){
self.onAjaxLoadSuccess(self,data);
}
).fail( function(data){
self.onAjaxLoadError(self,data);
}
);
}
self.state.open = true;
self.state.selectBox.addClass("open");
self.state.dropdown.slideDown(100);
}
,onAjaxLoadSuccess:function(self,data){
self.state.ajaxPending = false;
if(self.config.dataParser !== null ){
data = self.config.dataParser(data,self.state.selectedValue);
}
self.state.$el.empty();
data.forEach(function(v){
if(v.selected)self.state.selectedValue = v.val;
self.state.$el.append($("<option></option>").text( v.text ).val( v.val ));
}
);
self.state.$el.val( self.state.selectedValue );
self.state.originalItemData = data;
self.state.filteredItemData = data;
if(this.state.searchContainer !== null) this.state.searchContainer.show();
self.createItems();
}
,onAjaxLoadError:function(self,data){
self.setAjaxIndicator(true);
}
,onSelectLiClicked:function(e){
var self = e.data.self,item = $(e.currentTarget);
self.state.dropdown.find("li").each(function(){
$(this).removeClass("selected");
}
);
item.addClass("selected");
self.state.selectBox.html( item.text() );
self.state.selectedValue = item.attr("data-value");
self.state.$el.val(self.state.selectedValue);
self.state.$el.trigger("change");
}
,/* ******************************************************************* * * External callbacks * ******************************************************************* */
}
;
/* ******************************************************************* * * Plugin main * ******************************************************************* */
$.fn.tinyselect = function(options){
if( typeof(options) != "undefined" ){
}
return this.each(function(){
var sel = Object.create(TinySelect);
sel.init( $(this),options);
}
);
}
;
}
(jQuery));
CSS代码(tinyselect.css):
.tinyselect{height:34px;display:inline-block;min-width:200px;position:relative;}
.tinyselect .selectbox{position:absolute;height:100%;width:100%;text-align:left;border:1px solid #ccc;line-height:32px;padding-left:10px;box-sizing:border-box;cursor:pointer;border-radius:3px;white-space:nowrap;overflow-x:hidden;}
.tinyselect .selectbox::after{content:' ';position:absolute;right:0px;border-left:1px solid #ccc;height:100%;font-size:10pt;line-height:34px;padding:0px 8px;width:10px;background-color:#eee;background-repeat:no-repeat;background-position:center;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAJCAYAAADkZNYtAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuOWwzfk4AAABXSURBVChTjY0BCYBAFMWugw3MYRAbmMROhjGDFXQTThSfcoNx/P8HV2DEvUG7kxVTUPV+MWCKqt4fLJhC9y96TLH7yIz30PmTDjc09HX+ZUJj3ybC96UczHIuzhJ1BlkAAAAASUVORK5CYII=');}
.tinyselect .selectbox.open::after{content:' ';background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAJCAYAAADkZNYtAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuOWwzfk4AAABYSURBVChTY8ABWqE0QZAOxP+hNF4gDMTvgBikGESD+DgByHqQQhjG6RwlIEZWCMMgcQywA4ixKQaJowAbIMamEIZB8nBwB4ixKYJhkDwYRAAxNgVomCECALjaLs5bhaybAAAAAElFTkSuQmCC');}
.tinyselect .dropdown{position:absolute;width:100%;top:33px;border:1px solid #ccc;background-color:white;z-index:100;box-sizing:border-box;max-height:200px;overflow-x:hidden;overflow-y:scroll;}
.tinyselect .dropdown .searchcontainer{padding:5px;}
.tinyselect .dropdown .searchbox{width:100%;border:1px solid #ccc;font-size:10pt;line-height:2em;padding:0 5px;}
.tinyselect .dropdown .searchicon{position:absolute;top:12px;right:8px;width:14px;height:14px;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuOWwzfk4AAADESURBVDhPnZLBDcIwDEW7DIt0CmZgBW5tc2AAFugWDNB7FuDMAB0g+FV25AQLJA5Prb797djJUEoJmabptCzLVVjneb4Lo483yYYadqF0bBQkJzJdSJIOT/7RtPuKLmS0yPgCq+zhyGq+NYGU0tkCXvdQVNh68TgmX697JJahEf/uaAEWE80oMbb9OSPJus1jq5zA6SxmR0erJhFGM30h20kOk85WL5wCWogu3N9q3Y3QFM3Xw8D+adUn9QtvfEQJMWV4A2WMBVG/g0M8AAAAAElFTkSuQmCC');}
.tinyselect .itemcontainer{list-style:none;margin:0;padding:0;}
.tinyselect .itemcontainer > li{padding:5px 2px;}
.tinyselect .itemcontainer > li.item{padding:5px 10px;}
.tinyselect .itemcontainer > li.selected{background-color:#eee;}
.tinyselect .itemcontainer > li.item:hover{background-color:#1b6eab;color:white;}
.tinyselect .itemcontainer li.loadindicator{padding:15px;font-weight:bold;}
.tinyselect .itemcontainer li.loaderrorindicator{padding:15px;font-weight:bold;color:red;}
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{/*background:#494A5F;color:#D5D6E2;*/
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{display:table;width:800px;margin:20px auto;border-spacing:10px;}
.row{display:table-row;width:100%;height:350px;}
.cell{display:table-cell;width:45%;height:350px;position:relative;padding:20px;border:5px solid #c6ced8;}
.desc{position:absolute;bottom:0;left:0;width:100%;height:70px;padding:8px;line-height:1.2em;background-color:#c6ced8;color:#535F6F;}
select{display:inline-block;margin-top:10px;}
.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;}
}
分享到QQ
分享到微博
微信扫一扫
