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 */
相关推荐
nmgxzm00 2020-11-10
ifconfig 2020-10-14
hhanbj 2020-11-17
zfszhangyuan 2020-11-16
古叶峰 2020-11-16
一个智障 2020-11-15
jipengx 2020-11-12
81427005 2020-11-11
xixixi 2020-11-11
游走的豚鼠君 2020-11-10
苗疆三刀的随手记 2020-11-10
Web卓不凡 2020-11-03
小飞侠V 2020-11-02
帕尼尼 2020-10-30
爱读书的旅行者 2020-10-26
帕尼尼 2020-10-23
杏仁技术站 2020-10-23
淼寒儿 2020-10-22