分享一篇无意间发现的自动完成源码。这里测试的时候使用的是数组，实际使用的时候，我们换成埃阿斯从服务器端获取的方式就好了。

提示：可以直接保存到一个超文本标记语言文件中查看效果。

！声明文档类型

超文本标记语言

风格

body {

左边距： 0px

margin-top : 0px；

margin-right : 0px；

边距-底部： 0px

}。auto_hidden {

width :204 pxborder-top : 1px solid # 333；

边框-底部： 1px实心# 333；

左边框： 1px实心# 333；

右边框： 1px实心# 333；

位置：值；

display:none

}。auto_show {

宽度：204px

边框-顶部： 1px实心# 333；

边框-底部： 1px实心# 333；

左边框： 1px实心# 333；

右边框： 1px实心# 333；

位置：值；

z索引：9999；/* 设置对象的层叠顺序*/

显示：块

}。auto_onmouseover{

color: # ffffff

背景色：高亮；

宽度：;

}。auto_onmouseout{

颜色： # 000000

宽度：;

背景-color : # ffffff；

}

/style

脚本语言='javascript '

！-

var $=function (id) {

返回字符串'==的类型？文件。GetElementbyID(id): id；

}

var Bind=function(object，fun) {

return function() {

返回fun.apply(对象，自变量);

}

}

函数自动完成(obj，autoObj，arr){

这个。obj=$(obj)；//输入框

这个。AutoObj=$(AutoObj)；//DIV的根节点

this.value _ arr=arr//不要包含重复值

这个。index=-1；//当前选中的差异的索引

this.search _ value=//保存当前搜索的字符

}

AutoComplete.prototype={

//初始化差异的位置

init:函数(){

这个。autoobj。风格。左=这个。obj。offsetleft ' px

这个。autoobj。风格。top=这个。obj。偏移顶部。obj。offset ThAT ' px

这个。autoobj。风格。宽度=这个。obj。offset with-2 ' px '；//减去边框的长度2px

},

//删除自动完成需要的所有差异

deleteDIV:函数(){

而(这个。AutoObj。HasChildNodes()){

这个。autoobj。移除子(此。autoobj。胎)；

}

这个。AutoObj。ClassName=' auto _ hidden

},

//设置值

setValue:函数(_this){

return function(){

_这个。obj。值=this。seq

_这个。AutoObj。ClassName=' Auto _ hidden

}

},

//模拟鼠标移动至差异时，DIV高亮

autoOnmouseover:函数(_this，_div_index){

return function(){

_ this.index=_ div _ index

var length=_ this。AutoObj。孩子们。长度；

for(var j=0；jlengthj ){

if(j！=_this.index ){

_this.autoObj.childNodes[j].className=' auto _ onmouseout

}else{

_this.autoObj.childNodes[j].className=' auto _ onmouseover

}

}

}

},

//更改类名

changeClassname:函数（长度){

for(var I=0；ileng tti){

if(i！=this.index ){

this.autoObj.childNodes[i].className=' auto _ onmouseout

}else{

this.autoObj.childNodes[i].className=' auto _ onmouseover

这个。obj。值=this。AutoObj。子节点.顺序

}

}

}

,

//响应键盘

按键：功能（事件){

var length=this。AutoObj。孩子们。长度；

//光标键''

if(event.keyCode==40){

这个索引

if(this.indexlength){

这个。index=0；

}else if(this.index==length){

这个。obj。值=this。search _ value

}

this.changeClassname(长度);

}

//光标键''

else if(event.keyCode==38){

这个。index-；

if(this.index-1){

这个。索引=length-1；

}else if(this.index==-1){

这个。obj。值=this。search _ value

}

this.changeClassname(长度);

}

//回车键

else if(event.keyCode==13){

这个。AutoObj。ClassName=' auto _ hidden

这个。index=-1；

}else{

这个。index=-1；

}

},

//程序入口

start:函数（事件){

if(event.keyCode！=13event.keyCode！=38event.keyCode！=40){

这个。init()；

这个。delete div()；

这个。search _ value=this。obj。价值；

var valueArr=this.value _ arr

值arr。sort()；

if(this.obj.value.replace(/(^\s*)|(\s*$)/g,'')==''){回归；}//值为空，退出

尝试{ var reg=new RegExp('(' this。obj。值')'、' I ')；}

catch(e){ return；}

var div _ index=0；//记录创建的差异的索引

for(var I=0；ivalueArr.lengthi ){

if(reg .测试(ValueArr[I]){

var div=文档。create ElEMENT(' div ')；

div。CLaSS name=' auto _ onmouseout

div。seq=ValueArr[I]；

div。onclick=this。setVaLue(this)；

div。onmouseover=this。AutoOnmouseover(this，div _ index)；

div.innerHTML=valueArr[i].替换(reg，‘strong $ 1/strong’)；//搜索到的字符粗体显示

这个。AutoObj。append child(div)；

这个。AutoObj。CLaSS name=' auto _ show

div _ index

}

}

}

this .按键(事件);

window.onresize=Bind(this，function(){ this。init()；});

}

}

//-

/SCRIPT

身体

氕对齐='居中'自动完成函数（自动完成功能)/h1

div align=' center '输入类型=' text ' style=' width :300 pxheight :20 pxfont-size :14 pt；id=' o ' onkey up=' AutoComplete。开始(事件)'/div

div class='auto_hidden' id='auto '！-自动完成DIV - /div

脚本

var autoComplete=new autoComplete(' o '，' auto '，['b0 '，' b12 '，' b22 '，' b3 '，' b4 '，' b5 '，' b6 '，' b7 '，' b8 '，' b2 '，' abd '，' ab '，' acd '，' accd '，' b1 '，' cd '，' ccd '，' cbcv '，' cxf '])；

/SCRIPT

/body

/html