一个简单的自动完成JS实现自动完成的一个例子
共享无意发现的自动完成源。当我们测试它时，我们使用一个数组，当你实际使用它时，我们改变Ajax从服务器端获得OK的方式。提示：可以直接保存到HTML文件中查看效果。
复制代码代码如下所示：
{体
左：0px保证金；
边距：0px；
右边距：0px；
边距：0px；
}
{。auto_hidden
宽度：204px；边境上：1px solid # 333；
底部边框：1px solid # 333；
左边界：1px solid # 333；
边境：1px solid # 333；
位置：绝对；
显示：无；
}
{。auto_show
宽度：204px；
边境上：1px solid # 333；
底部边框：1px solid # 333；
左边界：1px solid # 333；
边境：1px solid # 333；
位置：绝对；
Z指数：9999； / * * /设置层叠顺序
显示块；
}
auto_onmouseover {。
颜色：# ffffff；
背景颜色：高亮显示；
宽度：100%；
}
auto_onmouseout {。
颜色：# 000000；
宽度：100%；
背景颜色：# ffffff；
}
<！——
函数（id）{
返回字符串的身份document.getelementbyid = typeof（ID）：ID；
}
Var Bind =函数（对象，乐趣）{
返回函数（）{
返回fun.apply（对象、参数）；
}
}
自动完成功能（obj，autoobj，ARR）{
这个obj = $（obj）； / /输入框
这个autoobj = $（autoobj）； / / DIV的根节点
这个value_arr = ARR； / /不包含重复的值
索引= 1；当前选定的div索引
这。search_value = ； / /保存当前搜索字符
}
原型= {自动完成。
初始化div位置
init：函数（）{
this.autoobj.style.left = this.obj.offsetleft +PX；
this.autoobj.style.top = this.obj.offsettop + this.obj.offsetheight +PX；
这个autoobj。风格。宽度= this.obj.offsetwidth - 2 +PX； / /减的那个帧的长度
}，
删除自动完成所有必需的div
DeleteDIV：函数（）{
而（this.autoobj.haschildnodes（））{
this.autoobj.removechild（这个。autoobj。第一个孩子）；
}
这个autoobj。类名=auto_hidden ；
}，
设置值
设定值：函数（_this）{
返回函数（）{
_this .obj。值= this.seq；
_this。autoobj。类名=auto_hidden ；
}
}，
将鼠标移动到div，div突出显示
autoonmouseover：功能（_this，_div_index）{
返回函数（）{
_this。指数= _div_index；
VaR的长度= _this.autoobj.children.length；
对于（var j＝0；j <长度；j + +）{
如果（j）！= _this。指数）{
_this。autoobj。子{ } classname = 'auto_onmouseoutJ；
其他{ }
_this。autoobj。子{ } classname = 'auto_onmouseoverJ；
}
}
}
}，
改变 / /类名
changeclassname：功能（长度）{
对于（var i = 0；i <长度；i + +）{
如果（i）！=索引。）{
这个autoobj。子{我} classname = 'auto_onmouseout；
其他{ }
这个autoobj。子{我} classname = 'auto_onmouseover；
这个对象的值=本。autoobj。子{我}。序列；
}
}
}
，
键盘响应
按键：功能（事件）{
VaR的长度= this.autoobj.children.length；
光标键：
如果（密码= = 40事件。）{
+ + this.index；
如果（这个索引长度）{
索引= 0；
否则如果（此索引=长度）{
这个目标值= this.search_value；
}
This.changeClassname（长）；
}
光标键上了
如果（密码= = 38事件。）{
this.index--；
如果（索引< - 1）{
索引=长度- 1；
否则如果（此索引= - 1）{
这个目标值= this.search_value；
}
This.changeClassname（长）；
}
输入
如果（密码= = 13事件。）{
这个autoobj。类名=auto_hidden ；
索引= 1；
其他{ }
索引= 1；
}
}，
入口程序
开始：函数（事件）{
如果（的情况下！= 13event.keycode！= 38event.keycode！= 40）{
This.init（）；
This.deleteDIV（）；
这search_value = this.obj.value；
无功valuearr = this.value_arr；
valuearr.sort（）；
如果（this.obj.value.replace（（^ *） / |（ * $）/ G）= =）{ return；} / /值是空的，退出
尝试{ var reg = new RegExp（（+ this.obj.value + ），我）；}
catch（e）{返回；}
无功div_index = 0； / /创建指数记录
对于（var i = 0；i < valuearr.length；i++）{
如果（reg.test（valuearr {我}））{
var div = document.createelement（div）；
div.classname =auto_onmouseout ；
div.seq = valuearr {我}；
div.onclick = this.setvalue（本）；
div.onmouseover = this.autoonmouseover（这div_index）；
div.innerhtml = valuearr {我}。取代（REG，1美元）； / /搜索大胆的性格
this.autoobj.appendchild（DIV）；
这个autoobj。类名=auto_show ；
div_index + +；
}
}
}
This.pressKey（事件）；
窗口。onresize =绑定（这个函数（）{ this.init（）；}）；
}
}
自动完成功能（自动完成功能）
无功自动=新完成的（O，汽车，{ 'b0 '，'b12 '，'b22 '，'b3 '，'b4 '，'b5 '，'b5 '汽车'，X，T，T，T，T，T，H，R，R，D，R，D，D）。