css：
.chiron-search-dropdown{
padding-left: 0;
background-color: white;
list-style: none;
padding:5px 0;
font-size:14px;
border-radius:4px;
border:1px solid #ddd;
}
.chiron-search-dropdown-item a{
text-decoration:none;
display:block;
padding:2px .4em;
line-height:1.5；
min-height:0;
font-weight:400;
color:#262626;
}
.chiron-search-dropdown-item a:hover,.chiron-search-dropdown-item a:focus{
text-decoration:none;
background: #f5f5f5;
color:#262626;
}
.chiron-search-result-item{
padding:2px 0;
margin-right: 5px;
display:inline-block;
}
.chiron-search-result-remove{
color:#5596f2;
font-size:12px;
margin-left: 2px;
cursor:pointer;
}
js：
/*@auther alfred.qiu*/
(function($){
var ChironSearch=function(element,options){
this.$trigger=$(element);
this.options=options;
this.init();
};
ChironSearch.DEFAULTS={
removeIcon:"glyphicon glyphicon-trash",
zIndex:0,
method: 'get',
url: undefined,
ajax: undefined,
cache: true,
contentType: 'application/json',
dataType: 'json',
sideSearch:"client",// "client" or "server"
name:"searchText",
uploadForm:false,
data:[],
queryParam:{},
selectedData:[],
dealy:300,
sortable:false,
sortOrder:"asc",// "desc" or "asc"
formatResponse:function(res){
return res.data;
},
formatSorter:function(value){
return value;
},
sorter:function(a,b){
return 1;
},
formatDropdown:function(value){
return value;
},
success:function(res){
return true;
},
error:function(res){
return true;
}
};
ChironSearch.prototype.init=function(){
this.initData();
this.bindSearchEvent();
this.initResult();
};
ChironSearch.prototype.initData=function(){
if ( !$.isEmptyObject(this.options.selectedData) ){
this.options.originSelected=$.extend([],this.options.selectedData,true);
};
if ( !$.isEmptyObject(this.options.data) ){
this.originData=$.extend([],this.options.data,true);
};
if ( this.$trigger.attr("name") ){
this.options.name=this.$trigger.attr("name");
this.$trigger.removeAttr("name");
};
};
ChironSearch.prototype.bindSearchEvent=function(){
var that=this;
this.$trigger.off("keyup").on("keyup",function(event){
var which=event.which,
isValiated=( which>=65 && which<=90) || (which>=48 && which<=57) || which==8 || which==13
|| which==16 || which==32 || (which>=96 && which<=105 );
if ( !isValiated ) return;
if ( $(this).val()=="" ){
$(this).siblings(".chiron-search-dropdown").remove();
return;
};
that.options.value=that.$trigger.val();
setTimeout(function(){
if ( that.options.sideSearch=="server" ){
that.initServer.call(that);
}else {
that.updateData.call(that);
};
},that.options.dealy);
});
};
ChironSearch.prototype.initServer=function(){
var that=this,
name,data={};
data[this.options.name]=this.options.value;
if ( $.isEmptyObject(this.options.queryParam) ){
$.extend(data,this.options.queryParam);
};
var request={
type: this.options.method,
url: this.options.url,
data: this.options.contentType==='application/json' && this.options.method==='post' ?
JSON.stringify(data):data,
cache: this.options.cache,
contentType: this.options.contentType,
dataType: this.options.dataType,
success: function (res) {
that.options.success.call(this,res);
that.$trigger.trigger("search-success",res);
that.updateData(res);
},
error: function (res) {
that.options.error.call(this,res);
that.$trigger.trigger("search-error",res);
}
};
$.ajax(request);
};
ChironSearch.prototype.updateData=function(res){
var that=this;
if ( this.options.sideSearch=="server" && res ){
that.options.data=that.options.formatResponse(res);
}else{
var that=this,
value=this.options.value,
reg=new RegExp(value);
this.options.data=$.extend([],this.originData,true);
this.options.data=$.grep(this.options.data,function(item,index){
if ( String(item.field).match(reg) || item.value.match(reg) ) return true;
return false;
});
};
$.each(this.options.data,function(index,item){
if (item.html) return;
item.html=item.value;
});
if ( this.options.sortable ){
this.initSort();
};
this.initDropDown();
};
ChironSearch.prototype.initSort=function(){
var that=this,
order = this.options.sortOrder=='desc'?-1:1;
this.options.data.sort(function(a,b){
var aa=that.options.formatSorter(a.html),
bb=that.options.formatSorter(b.html),
sorter=that.options.sorter(aa,bb);
if ( sorter!=undefined ){
return order*sorter;
};
if ($.isNumeric(aa) && $.isNumeric(bb)) {
aa = parseFloat(aa);
bb = parseFloat(bb);
if (aa < bb) {
return order * -1;
};
return order;
};
if (aa === bb) {
return 0;
};
if (typeof aa!=='string') {
aa=aa.toString();
};
if (aa.localeCompare(bb)===-1) {
return order*-1;
};
return order;
});
};
ChironSearch.prototype.initDropDown=function(){
var that=this,
html=[];
if ( this.$dropdown && this.$dropdown.length ){
this.$dropdown.html("");
}else{
this.$trigger.after("<ul class='chiron-search-dropdown'></ul>");
};
this.$dropdown=this.$trigger.siblings(".chiron-search-dropdown");
$.each(that.options.data,function(index,item){
var dropdownItem=that.options.formatDropdown(item.html);
html.push(
"<li data-field='",
item.field,
"' data-value='",
item.value,
"' class='chiron-search-dropdown-item'><a>",
dropdownItem,
"</a></li>"
);
});
html=html.join("");
this.$dropdown.append(html);
this.place();
this.$trigger.siblings(".chiron-search-dropdown").off("click").on("click",".chiron-search-dropdown-item",function(){
var field=$(this).data("field"),
value=$(this).data("value");
that.$trigger.val("");
that.updateSelectedData.call(that,field,value);
that.$dropdown.remove();
});
$(document).on("click",this.$trigger.parent(),function(event){
that.$dropdown.remove();
});
};
ChironSearch.prototype.place=function(){
var top=this.$trigger.parent().top,
width=this.$trigger.innerWidth(),
zIndex=99,
that=this;
if (!this.options.zIndex) {
var index_highest = 0;
$('div').each(function () {
var index_current=parseInt($(this).css('zIndex'), 10);
if ( index_current>index_highest ) {
index_highest=index_current;
};
});
this.options.zIndex=index_highest+10;
};
this.$trigger.parent().css({position:"relative"});
this.$dropdown.css({position:"absolute",top:top,"z-index":that.options.zIndex})
.width(width);
};
ChironSearch.prototype.updateSelectedData=function(field,value){
var that=this,
isRepeated=false;
$.each(this.options.selectedData,function(inde,item){
if (item.field==field){
isRepeated=true;
};
});
if (!isRepeated){
that.options.selectedData.push({field:field,value:value});
that.initResult.call(that);
};
};
ChironSearch.prototype.initResult=function(){
var that=this,
html=[],
deleteIndex;
if ( this.$result ){
this.$result.html("");
}else{
this.$trigger.parent().append("<div class='chiron-search-result'></div>");
setTimeout(function(){
var width=that.$trigger.innerWidth();
that.$trigger.siblings(".chiron-search-result").width(width);
},300);
};
this.$result=this.$trigger.siblings(".chiron-search-result");
$.each(this.options.selectedData,function(index,item){
html.push(
"<span data-field='",
item.field,
"' class='chiron-search-result-item'>",
item.value,
"<span class='chiron-search-result-remove ",
that.options.removeIcon,
"'></span></span>"
);
});
html=html.join("");
this.$result.append(html);
if ( that.options.uploadForm ){
that.uploadForm();
};
$(".chiron-search-result-remove").off("click").on("click",function(){
var field=$(this).parent().data("field");
$.each(that.options.selectedData,function(index,item){
if (item.field==field){
deleteIndex=index;
return;
};
});
that.options.selectedData.splice(deleteIndex,1);
$(this).parent().remove();
});
};
ChironSearch.prototype.uploadForm=function(){
var that=this,
html,$input,fields=[];
html="<input type='hidden' name='"+this.options.name+"'>";
this.$trigger.parent().append(html);
$input=this.$trigger.siblings("[name='"+this.options.name+"']");
$.each(this.options.selectedData,function(index,item){
fields.push(item.field);
});
fields=fields.join(",");
$input.val(fields);
};
ChironSearch.prototype.getSelectedData=function(){
return this.options.selectedData;
};
ChironSearch.prototype.reset=function(){
if ( this.options.originSelected ){
this.options.selectedData=$.extend([],this.options.originSelected);
this.destroy();
this.initResult();
};
};
ChironSearch.prototype.destroy=function(){
this.$trigger.siblings(".chiron-search-result").remove();
this.$trigger.siblings("[name='"+this.options.name+"']").remove();
delete this.$result;
return this.$trigger;
};
var allowedMethods=["getSelectedData","reset","destroy"];
$.prototype.chironSearch=function(option){
var value,
args=Array.prototype.slice.call(arguments, 1),
data=$(this).data("chiron-search"),
that=this,
options=$.extend({},ChironSearch.DEFAULTS,$(this).data(),typeof option==='object' && option);
if ( typeof option=="string" ){
if ( $.inArray(option,allowedMethods)<0 ) {
throw new Error("Unknown method: "+option);
};
if ( !data ){
return;
};
value=data[option].apply(data, args);
if (option==='destroy') {
$(this).removeData('chiron-search');
};
};
if ( !data ){
$(this).data('chiron-search', (data=new ChironSearch(this, options)));
};
return typeof value === 'undefined' ? this : value;
};
})(jQuery)