ajax数据库交互自动补全,jquery+ajax实现输入数据自动补全功能

var Bind = function (object, fun) {returnfunction () {return fun.apply(object, arguments);

}

}

function AutoComplete(obj, autoObj, arr) {this.obj = document.getElementById(obj); //输入框

this.autoObj = document.getElementById(autoObj);//DIV的根节点

this.value_arr = arr; //不要包含重复值

this.index = -1; //当前选中的DIV的索引

this.search_value = ""; //保存当前搜索的字符

}

AutoComplete.prototype={//初始化DIV的位置

init: function () {this.autoObj.style.left = $(this.obj).offset().left + "px";//this.obj.offsetLeft

this.autoObj.style.top = $(this.obj).offset().top + this.obj.offsetHeight + "px"; //this.obj.offsetTop + this.obj.offsetHeight

this.autoObj.style.width = this.obj.offsetWidth - 2 + "px";//减去边框的长度2px//this.autoObj.style.left = this.obj.offsetLeft + "px";//this.autoObj.style.top = this.obj.offsetTop + this.obj.offsetHeight + "px";//this.autoObj.style.width = this.obj.offsetWidth - 2 + "px";//减去边框的长度2px

},//删除自动完成需要的所有DIV

deleteDIV: function () {while (this.autoObj.hasChildNodes()) {this.autoObj.removeChild(this.autoObj.firstChild);

}this.autoObj.className = "auto_hidden";

},//设置值

setValue: function (_this) {returnfunction () {

_this.obj.value= this.seq;

_this.autoObj.className= "auto_hidden";

}

},//模拟鼠标移动至DIV时，DIV高亮

autoOnmouseover: function (_this, _div_index) {returnfunction () {

_this.index=_div_index;var length =_this.autoObj.children.length;for (var j = 0; j < length; j++) {if (j !=_this.index) {

_this.autoObj.childNodes[j].className= 'auto_onmouseout';

}else{

_this.autoObj.childNodes[j].className= 'auto_onmouseover';

}

}

}

},//更改classname

changeClassname: function (length) {for (var i = 0; i < length; i++) {if (i != this.index) {this.autoObj.childNodes[i].className = 'auto_onmouseout';

}else{this.autoObj.childNodes[i].className = 'auto_onmouseover';this.obj.value = this.autoObj.childNodes[i].seq;

}

}

},//响应键盘

pressKey: function (event) {var length = this.autoObj.children.length;//光标键"↓"

if (event.keyCode == 40) {++this.index;if (this.index >length) {this.index = 0;

}else if (this.index ==length) {this.obj.value = this.search_value;

}this.changeClassname(length);

}//光标键"↑"

else if (event.keyCode == 38) {this.index--;if (this.index < -1) {this.index = length - 1;

}else if (this.index == -1) {this.obj.value = this.search_value;

}this.changeClassname(length);

}//回车键

else if (event.keyCode == 13) {this.autoObj.className = "auto_hidden";this.index = -1;

}else{this.index = -1;

}

},//程序入口

start: function (event) {if (event.keyCode != 13 && event.keyCode != 38 && event.keyCode != 40) {this.init();this.deleteDIV();this.search_value = this.obj.value;var valueArr = this.value_arr;

valueArr.sort();if (this.obj.value.replace(/(^\s*)|(\s*$)/g, '') == "") { return; }//值为空，退出

try { var reg = new RegExp("(" + this.obj.value + ")", "i"); }catch (e) { return; }var div_index = 0;//记录创建的DIV的索引

for (var i = 0; i < valueArr.length; i++) {if(reg.test(valueArr[i])) {var div = document.createElement("div");

div.className= "auto_onmouseout";

div.seq=valueArr[i];

div.οnclick= this.setValue(this);

div.οnmοuseοver= this.autoOnmouseover(this, div_index);

div.innerHTML= valueArr[i].replace(reg, "$1");//搜索到的字符粗体显示

this.autoObj.appendChild(div);this.autoObj.className = "auto_show";

div_index++;

}if (div_index > 100) break;

}

}this.pressKey(event);

window.οnresize= Bind(this, function () { this.init(); });

}

}