javascript自动补全 支持键盘上下键 可以自定义数据，处理函数

/**
 * @author wsf(自动补全动补全 支持键盘上下键)
 */
;
(function (win,$){
	// 客户自动补全对象
	function _autoComplete(){
		this.dataUrl = "/xxxx/customerwidget/queryAllCustName.do";// action
		this.data = null;// 数据
		this.target = null;// 作用于哪个元素(input)
		this.defaultText = "搜索：全称/简称/首字母";//输入框默认显示字符
       this.autoName = ["INITIALALLNAME","FULLNAME"];//自动补全名称
		this.panelWidth = 385;
		this.panelHeight = 360;
		this.event = {
				"click":this.click,
				"focus":this.focus,
				"keyup":this.keyup,
				"keydown":this.keydown,
				"blur":this.blur,
				"input propertychange":this.propChange
		};
		this.isArrawKey = false;// 是否是上下键
		this.log = function (msg){
			console.log(msg);
		},
      //自定义函数（比如说按下 enter键后）
        this.customerFn = function (){
   
        }
	}
	// 原型对象
	_autoComplete.prototype = {
			// 构造函数
			curstructor:_autoComplete,
			//获取数据
			getData:function (){
				var that = this;
				$.getJSON(this.dataUrl,function (data){
					that.data = data;
				})
			},
			// 入口函数
			autoCompleteStart:function (targetid){
				if(this.data==null);
				   this.getData();
				this.target = $("#"+targetid);
				this.target.bind(this.event,this);
			},
			// 单击事件
			click:function(e){
				var that = e.data;
				var _val = $(that.target).val();
				if(_val.indexOf("搜索：")>=0)
					$(that.target).val("");
				else{
					that.autoComplete.call(that,e,_val);
				}
			},
			// 获得焦点事件
			focus:function (e){
				var that = e.data;
				var keycode = e.which;
			},
			// 松开键盘
			keyup:function (e){
				var that = e.data;
				var keycode = e.which;
				var _val = $(that.target).val();
				if(!$.trim(_val)){
					$("#autoComoplete").slideUp(300);
				}else {
					if(!that.isArrawKey)
					   that.autoComplete.call(that,e,_val);
				}
				that.isArrawKey = false;
			},
			// 按下键盘
			keydown:function(e){
				var that = e.data;
				var keycode = e.which;
				if(keycode == 13){
					$(that.target).blur();
				}
				var _kids,_first,h = [];
				_kids = $("#autoComoplete").find("li");//
				_first = _kids.first();// 第一个孩子
				h = _kids.filter(function (){
					return $(this).attr("downSelected") == "true";//被选过
				});
				if(keycode == 40){
					that.isArrawKey = true;// 向下箭头
					if(!h[0]){
						// 没有被选中过
						_first[0].setAttribute("downSelected",true);
						_first.css("background-color","rgb(251, 236, 136)");
						$(that.target).val(_first.text());
					}else{
						// 有选中的
						h[0].setAttribute("downSelected",false);
						h.css("background-color","#FFF");
						var _nxt = h.next();
						_nxt[0].setAttribute("downSelected",true);
						_nxt.css("background-color","rgb(251, 236, 136)");
						$(that.target).val(_nxt.text());
					}
				}
				if(keycode == 38){
					that.isArrawKey = true;// 向上箭头
					if(h[0]){
						// 有选中的
						h[0].setAttribute("downSelected",false);
						h.css("background-color","#FFF");
						var _prev = h.prev();
						_prev[0].setAttribute("downSelected",true);
						_prev.css("background-color","rgb(251, 236, 136)");
						$(that.target).val(_prev.text());
					}
				}
			},
			// 失去焦点
			blur:function (e){
				var that = e.data;
				var keycode = e.which;
				$("#autoComoplete").slideUp(300);
				var _val = $(that.target).val();
				if(!$.trim(_val)){
					$(that.target).val(that.defaultText);
				}
			},
			// propertychange事件
			propChange:function (e){
				var that = e.data;
				that.log("porp");
				var keycode = e.which;
				var _val = $.trim($(that.target).val());
				if(!_val){
					$("#autoComoplete").slideUp(300);
						$(that.target).val(that.defaultText);
				}
			},
			// 自动补全主方法
			autoComplete:function (e,value) {
				if(!value) return;
				var srcEle = $("#autoComoplete");
				var html = [];
				var _d = this.data;
				for(var i = 0 ;i <　_d.length;i++){
					var item = _d[i];
					var shouzimu = item[this.autoName[0]];//;
					var name  = item[this.autoName[1]];//
					var idx = name.indexOf(value);
					var idx2 = shouzimu.indexOf(value);
					if(idx >= 0||idx2>=0){
						var _id = item.ID;
						var prev,last;
						if(idx2>=0){
							var _len = value.length;
							prve = name.substring(0,_len);
							last = name.substring(_len);
							var _name = "<font color='blue' style='font-weight:bold;'>" + prve + "</font>" + last;
							html.push('<li class="autoItem"  style="height:24px;line-height:24px;overflow:hidden;list-style:none;font-size:13px;margin:10px 0 8px 0;cursor:pointer;"><a id='+_id+'>' + _name + "</a></li>");
						}else if(idx>=0){
							prev = name.substring(0,idx);
							last = name.substring(idx+value.length);
							var _name = prev + "<font color='blue' style='font-weight:bold;'>" + value + "</font>" + last;
							html.push('<li class="autoItem"  style="height:24px;line-height:24px;overflow:hidden;list-style:none;font-size:13px;margin:10px 0 8px 0;cursor:pointer;"><a id='+_id+'>' + _name + "</a></li>");
						}
					}
				}
				if(html.length==0){
                                     $("#autoUl").html("");
                                  return;
                                 }
				html = html.slice(0,10);//值取前十条
				var _pos = $(this.target).position();
				var _inputHeight = $(this.target).height();
				if(!srcEle[0]){
					var div = $("<div id='autoComoplete' style='diplay:none;'><div>");
					var ul = $("<ul id='autoUl'></ul>");
					ul.append(html).appendTo(div);
					ul.css({
						"padding":"0",
						"margin":"0",
						"padding-left":"15px",
					});
					div.css({
						"position":'fixed',
						"top":_pos.top+_inputHeight,
						"left":_pos.left,
						"background-color":"#fff",
						"border":"1px solid lightblue",
						"width":this.panelWidth + "px",
						"height":this.panelHeight + "px",
						"overflow":"hidden",
						"border-top":"none",
						"z-index":"9999999999"
							
					});
					div.appendTo($("body")).slideDown(300);
				}else{
					$("#autoUl").html(html);
					srcEle.css({
						"position":'fixed',
						"top":_pos.top+_inputHeight,
						"left":_pos.left,
					});
					srcEle.slideDown(300);
				}
				
				this.after();
				
			},
			//列表显示后函数
		    after:function (){
		    	$(".autoItem").hover(function (){
		    		$(this).addClass("currentLi");
		    	},function (){
		    		$(this).removeClass("currentLi");
		    	}).click(function (){
		    		$(this.target).val($(this).find("a").text());
		    		$(this).parent().parent().slideUp(300);
		    	});
		    }
	}
	win._autoComplete = _autoComplete;// 外部调用入口
})(window,jQuery);


/**
 * 调用方式
 * var ac = new _autoComplete();//自动补全
	ac.defaultText = "";
	ac.panelWidth = 300;
	//还可以设置其他自定义属性
        ac.customerFn = $.commonSearch;//一个搜索函数（当敲下enter键后回执行此方法）
	ac.autoCompleteStart("custCnName");//input id
 */

 

 

评论

2 楼 jiang0 2014-07-25  

这么复杂？

1 楼 470275283 2014-07-25  

  学习了