现在很多网站都有这个效果，在文本框中输入一个字符，就会出现匹配内容的代码，演示这个功能是如何完成的，当然，这是静态的，你可以提示内容从数据库中读取，使用ajax向东。
复制代码代码如下所示：


具有输入匹配的文本框

主体，div
字体：宋体；
线高度：100%；
字体大小：10pt；
}
输入{
宽度：320px；
}
{ H1
文本对齐：中心；
字体大小：2.2em；
}
{ # DIVC
边境：1px solid # 555；
}
{。DES
宽度：500px；
背景颜色：浅黄色；
边境：1px solid # 555；
填料：25px；
边距：25px；
}
{。鼠标悬停
颜色：# ffffff；
背景颜色：高亮显示；
宽度：100%；
游标：默认值；
}
{。mouseout
颜色：# 000；
宽度：100%；
背景颜色：# ffffff；
游标：默认值；
}


<！——
功能jsauto（instancename，objId）
{
这_msg = { }；
这_x = null；
这_o = document.getelementbyid（objId）；
如果（！这_o）返回；
这_f = null；
这_i = instanceName；
这_r = null；
这_c = 0；
这_s = false；
这_v = null；
这个_o.style.visibility =隐藏；
这个_o.style.position =绝对；
这个_o.style.zindex =9999；
这个_o.style.overflow =汽车；
这个_o.style.height =50；
返回此；
}；


jsauto。原型。directionkey =函数（）{（本）
{
var = _e.keycode _e.keycode：_e.which；
var = _o.childnodes.length；
（_c > L-1 _c＜0 _s =假| |）：；


如果（E = = 40 _s）
{
_o。子{ _c }。类名=怪；
（_c > = L-1）：_c + _c = 0；
_o。子{ _c }。类名=问号；
}
如果（E = = 38 _s）
{
_o。子{ _c }。类名=怪；
_c——< = 0 _c = _o.childnodes.length-1：；
_o。子{ _c }。类名=问号；
}
如果（= = 13）
{
如果（_o。子_c } { _o。风格。能见度= =可见）
{
_r.value = _x { _c }；
_o.style.visibility =隐藏；
}
}
如果（！_s）
{
_c = 0；
_o。子{ _c }。类名=问号；
_s =真；
}
} }；


/ /事件。
jsauto。原型。domouseover =功能（obj）{（本）
{
_o。子{ _c }。类名=怪；
_c = 0；
OBJ。= =div标签名obj。类名=问号：对象。parentelement。类名=问号；
} }；
jsauto。原型。domouseout =功能（obj）
{
OBJ。= =div标签名obj。类名=怪异：对象。parentelement。类名=怪；
}；
jsauto。原型。doclick =功能（MSG）{（本）
{
如果（_r）
{
_r.value =味精；
_o.style.visibility =隐藏；
}
其他的
{
警报（Javaｓｃｒｉｐｔ完成的错误：无法获取返回对象；
返回；
}
} }；


对象方法；
jsauto。原型项目=功能（味精）。
{
如果（msg.indexof（
{
无功arrmsg = msg.split（
对于（var i = 0；i < arrmsg.length；i++）
{
arrmsg {我}这。_msg.push（arrmsg {我}）：；
}
}
其他的
{
这_msg.push（味精）；
}
这_msg.sort（）；
}；
jsauto。原型。附加=功能（MSG）{（本）
{
_i ：_i = eval（_i）；
_x.push（MSG）；
var div = document.createelement（div）；
将绑定事件绑定到对象。
div.onmouseover =函数（）{ _i.domouseover（这）}；
div.onmouseout =函数（）{ _i.domouseout（这）}；
div.onclick =函数（）{ _i.doclick（MSG）}；
var = new RegExp（（+ _v + ），我）；
div.style。lineheight =140%；
div.classname =怪；
如果（_v）div.innerhtml = msg.replace（RE，1美元）；
div.style.fontfamily =Verdana；


_o.appendchild（DIV）；
} }；
jsauto。原型。显示=函数（）{（本）
{
如果（_f _v！
{
_o.style.left = _r.offsetleft；
_o.style.width = _r.offsetwidth；
_o.style.top = _r.offsettop + _r.offsetheight；
_o.style.visibility =可见；
}
其他的
{
_o。风格。能见度=隐藏；
}
} }；
jsauto。原型。HandleEvent =函数（F值，FID，事件）{（本）
{
VaR是；
_e =事件；
var = _e.keycode _e.keycode：_e.which；
_x = { }；
_f = false；
_r = document.getelementbyid（FID）；
_v =；
_i = eval（_i）；
Re = new RegExp（^ ：+ +
_o .innerHTML = ；


对于（var i = 0；i < _msg.length；i++）
{
如果（re.test（_msg {我}））
{
_i.append（_msg {我}）；
_f =真；
}
}


_i _i.display（）：警告（不审）；


如果（_f）
{
（如果（E = = 38 = = 40 = = 13 | | | |））
{
_i.directionkey（）；
}
其他的
{
_c = 0；
_o。子{ _c }。类名=问号；
_s =真；
}
}
} }；
窗口。误差=新功能（return true；）；















<！——
无功jsautoinstance =新jsauto（jsautoinstance
JsAutoInstance.item（A-START，b-start，C，d-start，该，f-start，憬达，h-start，I-开始，j-start，K-START，l-start，m-start，n-start，o-start，p-start，q-start，瑞兴，S，t-start，u-start，v-start，w-start，x-start，y-start，z-start，z-start，A-START，b-start，C，该d-start，f-start，憬达，h-start，I-开始，j-start，K-START，l-start，m-start，n-start，o-start，p-start，q-start，瑞兴，S，t-start，u-start，v-start，w-start，x-start，y-start，z-start，u-start，v-start，w-start，x-start，y-start，z-start，z-start，A-START，b-start，C。y-start，z-start，z-start，A-START，b-start，C，d-start，该，f-start，憬达，h-start，I-开始，S，w-start，x-start，y-start，z-start，z-start，A-START，b-start，C，d-start，该，f-start，憬达，h-start，I-开始，A-START，b-start，C，d-start，该，z-start，z-start ）；
JsAutoInstance.item（bluedestiny ）；
JsAutoInstance.item (BlueMiracle, Blue);
JsAutoInstance.item（安吉拉，geniuslau ）；
JsAutoInstance.item（永远在线）；


请在输入框中输入一个字母：