chiron.search 输入框模糊搜索插件

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)