Skip to content

Instantly share code, notes, and snippets.

@hzhopen

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

Created July 31, 2014 02:51
Show Gist options
  • Save hzhopen/526354bd2555d5496725 to your computer and use it in GitHub Desktop.
Save hzhopen/526354bd2555d5496725 to your computer and use it in GitHub Desktop.
Download ZIP
javascript自动补全 支持键盘上下键 可以自定义数据，处理函数
Raw
javascript自动补全 支持键盘上下键 可以自定义数据，处理函数
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){
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;$("#autoUl").html("");
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return;
&nbsp;&nbsp;&nbsp;&nbsp; }
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
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment