jquery 自动补全插件源码

标签：

/*
自动补全插件
*/
!function($){
$.fn.extend({
autocomplete:function(arr,max){
return new $.Autocomplete(this,arr,max);//如果有，就首先生成一个
}
});
//构造函数
$.Autocomplete = function(input,arr,max){
this.option = {};
this.option.data = arr;//数据
this.option.max = max;
this.input = input;
this.init(this,input);
};

//初始化生成面板
$.Autocomplete.prototype.init = function(obj,input){
var left = input.offset().left;
var top = input.offset().top +input.height()+5;//获得补全框的定位
var width = input.width()+2;//获取宽度
obj.ul = $("<ul/>").addClass("autoUlCss");
obj.Panel = $("<div/>").css({"left":left,"top":top,"width":width}).addClass("mainCss").append(obj.ul[0]);//创建一个div并设置样式;
$("body").append(obj.Panel[0]);
bindInputEvent(obj,obj.option.data);
}
//生成列
$.Autocomplete.prototype.render = function (obj,data) {
// body...
obj.ul.empty();//先清空
if(!data instanceof Array||data.length <=0){
//如果数据不是数组
return;
}
else {
var length = data.length;
var keyWord = obj.input.val();//输入的关键字
for (var i = 0; i < length; i++) {
var li = $("<li/>").addClass("autoLiCss");
var textFirst = "",textLast="";//前面数据和后面数据
var index = data[i].indexOf(keyWord);//
textFirst = data[i].substr(0,index);
textLast = data[i].substr(index+keyWord.length,data[i].length);
li.html(textFirst+"<strong>"+keyWord+"</strong>"+textLast);
obj.ul.append(li[0]);
};
}
}
//显示当前项
$.Autocomplete.prototype.show = function () {
// body...
this.Panel && this.Panel.show();
}
//隐藏当前项
$.Autocomplete.prototype.hide =function () {
// body...
this.Panel&&this.Panel.hide();
}
//销毁对象
$.Autocomplete.prototype.destory = function () {
// body...
this.Panel.remove();
this.Panel = null;
this.option = {};
}
//根据输入的文本匹配数据
function matchData (obj,data,input) {
// body...
var result = [];
var txt =$.trim(input.val());//输入的文本
if($.trim(txt)==""){obj.hide();return [];}
var length = data.length;
for (var i = 0; i <length; i++) {
var indexData = data[i];//第i行数据
if(indexData.toUpperCase().indexOf(txt.toUpperCase())>=0){//匹配数据
result.push(indexData);
}
};
return result;//得到筛选后的数据
}
//将选中数据绑回输入框
function fillData(obj,text){
obj.input.val(text);
obj.hide();
}

//绑定文本框的事件
function bindInputEvent(obj,data){
//当前文本改变事件
obj.input.bind("keyup",function (event) {
// body...
var currentIndex = obj.ul.find("li.autoLiCssCurrent").index();
if(event.which == 38){//up
if(currentIndex == 0||currentIndex == -1){
setSeletedItem(obj,"max");
}
else {
setSeletedItem(obj,currentIndex-1);
}
}
else if(event.which == 40){//down
if(currentIndex == obj.ul.find("li").length -1||currentIndex == -1){
setSeletedItem(obj,0);
}
else {
setSeletedItem(obj,currentIndex+1);
}
}
else if(event.which === 13 || event.which === 108){//enter
fillData(obj, obj.ul.find("li.autoLiCssCurrent").text());//数据绑回
event.preventDefault();
}
else if(event.which == 27){//escape
obj.hide();
event.preventDefault();
}
else {
var matchDataResult = matchData(obj,data,obj.input);
if(!matchDataResult instanceof Array||matchDataResult.length <=0){
//如果数据不是数组
obj.hide();//隐藏结果
return;
}
obj.render(obj,matchDataResult);//生成列
obj.show();//显示结果
}
})
//绑定li的鼠标事件
obj.ul.bind("click",function(event){
var target = getEventTarget(event);
if(target.tagName.toLowerCase() ==‘li‘){
//如果是li的话，则将数据绑定回去
fillData(obj,$(target).text());//数据绑回

}
}).bind("mouseover",function(event){
var target = getEventTarget(event);
obj.ul.find("li.autoLiCssCurrent").attr("class","autoLiCss");//还原原选中项
if(target.tagName.toLowerCase() ==‘li‘){
//如果是li的话，则将数据绑定回去
$(target).attr("class","autoLiCssCurrent");//选中项
}
});
}
//设置键盘上下选中事件
function setSeletedItem(obj,index){
obj.ul.find("li.autoLiCssCurrent").attr("class","autoLiCss");//还原原选中项
if(typeof index == "string" && index=="max"){
var maxLength = obj.ul.find("li").length;//最后一个li

obj.ul.find("li").eq(maxLength-1).attr("class","autoLiCssCurrent");//选中项
}
else {
obj.ul.find("li").eq(index).attr("class","autoLiCssCurrent");//选中项
}
}
//获取当前事件对象 匹配ie
function getEventTarget(e) {
e = e || window.event;
return e.target || e.srcElement;
}
}(jQuery);

jquery 自动补全插件源码

标签：

原文地址：http://www.cnblogs.com/xuyanglifan/p/4377480.html