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)