仿百度的输框自动提示.docVIP

今天在项目中碰到一个需求，就是在input输入框中录入数据时（名字），假如敲入了一部分，在数据库中存在已有的姓名的前缀与之匹配，就弹出一个 google页面那种效果的下拉框，把相关的姓名列出来供他选择。可以用箭头上下选择，也可以用鼠标选择。这样可以提高录入的效率。 ? ? 输入框的布局如下： ??? ? 最终的效果如下： ? ? ? 表单中输入框的html代码为: trtd发件人/tdtdinput?type=text?name=sendername?id=sendername?value=//td/tr ? 为了在输入一些内容时，能够显示出那个选择框，我们要建立一个div,初始时不可见，当需要时就显示出来，并且将它移动到正确的位置。这个div采用的定位为绝对定位，这样就可以在整个页面用left和top来定位了，z-index为99，这样就可以盖住下面的东西。选择框的div为: div?id=helper?class=gac_m?style=visibility:hidden;?width=100%/div ?gac_m的css定义为： .gac_m?{background:white?none?repeat?scroll?0?0;border:1px?solid?black;cursor:default;font-size:13px;line-height:17px;margin:0;position:absolute;z-index:99;width:100px;left:10px;top:10px;} ?当需要显示时，我们需要将id为helper的div移动到正确的位置，这个位置就是input输入框的正下方，left即为input的相对页面左边的位移,top即为input相对页面上边的位移加上input本身的高度。现在的问题是怎么取得一个元素的相对页面的绝对位置，这个可以通过offsetparent取的父亲结点递归的来算。下面函数getabsposition用来取得元素obj的绝对位置，gettable(obj)用来把id为helper的div定位到obj正下方: function?getabsposition(obj)?{????var?r?=?{????????left:?obj.offsetleft,????????top?:?obj.offsettop????};????r.left?=?obj.offsetleft;????r.top??=?obj.offsettop;????if(obj.offsetparent)?{????????var?tmp?=?getabsposition(obj.offsetparent);????????r.left?+=?tmp.left;????????r.top??+=?tmp.top;????}????return?r;??}??function?gettable(obj)?{????var?pos?=?getabsposition(obj);????pos.top?+=?obj.offsetheight;????document.getelementbyid(helper).style.top?=?pos.top?+?px;????document.getelementbyid(helper).style.left?=?pos.left?+?px;????document.getelementbyid(helper).style.width?=?obj.offsetwidth?+?px;????document.getelementbyid(helper).style.visibility?=?;??} 现在可以定位并且显示id为helper的div了，下面的问题是当输入框中的内容改变时，采用ajax去服务器取得数据，然后更新div中的内容，并且显示出来。那么怎么侦测输入框中的内容改变了呢？假如采用onchange事件，只有当输入框失去焦点时才会触发，所以我们只有采用定时器的方式了，每隔一个时间片检查一下输入框的值，假如值改变了，就执行更新过程。下面checkvalue函数就是用来给定时器的函数，用来检查输入框的内容是否改变，getnameresponse是ajax的回调函数，用来对服务器传回的json数据解码并且以一定的方式显示在div中。 function?checkvalue()?{????var?nowvalue?=?document.getelementbyid(sendername).value;????if(prevalue?!=?nowvalue)?{????????ajax.c