inputSuggest文本框输入时提示、自动完成效果(邮箱输入自动补全插件)

　　像QQ邮箱提示、百度的搜索框提示、淘宝的商品搜索提示等，现在有不少的网站都有类似效果，以提升用户体验。

　　使用方法：

　　new InputSuggest({

　　input HTMLInputElement 必选

　　data Array ['sina.cn','sina.com','2008.sina.com','vip.sina.com.cn'] 必选

　　containerCls 容器className

　　itemCls 容器子项className

　　activeCls 高亮子项className

　　width 宽度设置此项将覆盖containerCls的width

　　opacity 透明度设置此项将覆盖containerCls的opacity……

　　在线演示:http://demo.glzy8.com/js/2012/inputSuggest/

　　完整源码下载：http://www.glzy8.com/jiaoben/44737.html

<!DOCTYPE HTML> 
<html> 
<head> 
<title>inputSuggest输入字符时提示</title> 
<style type="text/css"> 
body{margin:0;padding:0;} 
input{width:200px;} 
.suggest-container{border:1px solid #C1C1C1;visibility:hidden;} 
.suggest-item{padding:3px 2px;} 
.suggest-active {background:#33CCFF;color:white;padding:3px 2px;} 
</style> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Afunction%20InputSuggest(opt)%7B%20%0D%0Athis.win%20%3D%20null%3B%20%0D%0Athis.doc%20%3D%20null%3B%20%0D%0Athis.container%20%3D%20null%3B%20%0D%0Athis.items%20%3D%20null%3B%20%0D%0Athis.input%20%3D%20opt.input%20%7C%7C%20null%3B%20%0D%0Athis.containerCls%20%3D%20opt.containerCls%20%7C%7C%20'suggest-container'%3B%20%0D%0Athis.itemCls%20%3D%20opt.itemCls%20%7C%7C%20'suggest-item'%3B%20%0D%0Athis.activeCls%20%3D%20opt.activeCls%20%7C%7C%20'suggest-active'%3B%20%0D%0Athis.width%20%3D%20opt.width%3B%20%0D%0Athis.opacity%20%3D%20opt.opacity%3B%20%0D%0Athis.data%20%3D%20opt.data%20%7C%7C%20%5B%5D%3B%20%0D%0Athis.active%20%3D%20null%3B%20%0D%0Athis.visible%20%3D%20false%3B%20%0D%0Athis.init()%3B%20%0D%0A%7D%20%0D%0AInputSuggest.prototype%20%3D%20%7B%20%0D%0Ainit%3A%20function()%7B%20%0D%0Athis.win%20%3D%20window%3B%20%0D%0Athis.doc%20%3D%20window.document%3B%20%0D%0Athis.container%20%3D%20this.%24C('div')%3B%20%0D%0Athis.attr(this.container%2C%20'class'%2C%20this.containerCls)%3B%20%0D%0Athis.doc.body.appendChild(this.container)%3B%20%0D%0Athis.setPos()%3B%20%0D%0Avar%20_this%20%3D%20this%2C%20input%20%3D%20this.input%3B%20%0D%0Athis.on(input%2C'keyup'%2Cfunction(e)%7B%20%0D%0Aif(input.value%3D%3D'')%7B%20%0D%0A_this.hide()%3B%20%0D%0A%7Delse%7B%20%0D%0A_this.onKeyup(e)%3B%20%0D%0A%7D%20%0D%0A%7D)%3B%20%0D%0A%2F%2F%20blur%E4%BC%9A%E5%9C%A8click%E5%89%8D%E5%8F%91%E7%94%9F%EF%BC%8C%E8%BF%99%E9%87%8C%E4%BD%BF%E7%94%A8mousedown%20%0D%0Athis.on(input%2C'blur'%2Cfunction(e)%7B%20%0D%0A_this.hide()%3B%20%0D%0A%7D)%3B%20%0D%0Athis.onMouseover()%3B%20%0D%0Athis.onMousedown()%3B%20%0D%0A%7D%2C%20%0D%0A%24C%3A%20function(tag)%7B%20%0D%0Areturn%20this.doc.createElement(tag)%3B%20%0D%0A%7D%2C%20%0D%0AgetPos%3A%20function%20(el)%7B%20%0D%0Avar%20pos%3D%5B0%2C0%5D%2C%20a%3Del%3B%20%0D%0Aif(el.getBoundingClientRect)%7B%20%0D%0Avar%20box%20%3D%20el.getBoundingClientRect()%3B%20%0D%0Apos%3D%5Bbox.left%2Cbox.top%5D%3B%20%0D%0A%7Delse%7B%20%0D%0Awhile(a%20%26%26%20a.offsetParent)%7B%20%0D%0Apos%5B0%5D%20%2B%3D%20a.offsetLeft%3B%20%0D%0Apos%5B1%5D%20%2B%3D%20a.offsetTop%3B%20%0D%0Aa%20%3D%20a.offsetParent%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Areturn%20pos%3B%20%0D%0A%7D%2C%20%0D%0AsetPos%3A%20function()%7B%20%0D%0Avar%20input%20%3D%20this.input%2C%20%0D%0Apos%20%3D%20this.getPos(input)%2C%20%0D%0Abrow%20%3D%20this.brow%2C%20%0D%0Awidth%20%3D%20this.width%2C%20%0D%0Aopacity%20%3D%20this.opacity%2C%20%0D%0Acontainer%20%3D%20this.container%3B%20%0D%0Acontainer.style.cssText%20%3D%20%0D%0A'position%3Aabsolute%3Boverflow%3Ahidden%3Bleft%3A'%20%0D%0A%2B%20pos%5B0%5D%20%2B%20'px%3Btop%3A'%20%0D%0A%2B%20(pos%5B1%5D%2Binput.offsetHeight)%20%2B%20'px%3Bwidth%3A'%20%0D%0A%2F%2F%20IE6%2F7%2F8%2F9%2FChrome%2FSafari%20input%5Btype%3Dtext%5D%20border%E9%BB%98%E8%AE%A4%E4%B8%BA2%EF%BC%8CFirefox%E4%B8%BA1%EF%BC%8C%E5%9B%A0%E6%AD%A4%E5%8F%96offsetWidth-2%E4%BF%9D%E8%AF%81%E4%B8%8EFF%E4%B8%80%E8%87%B4%20%0D%0A%2B%20(brow.firefox%20%3F%20input.clientWidth%20%3A%20input.offsetWidth-2)%20%2B%20'px%3B'%3B%20%0D%0Aif(width)%7B%20%0D%0Acontainer.style.width%20%3D%20width%20%2B%20'px'%3B%20%0D%0A%7D%20%0D%0Aif(opacity)%7B%20%0D%0Aif(this.brow.ie)%7B%20%0D%0Acontainer.style.filter%20%3D%20'Alpha(Opacity%3D'%20%2B%20opacity%20*%20100%20%2B%20')%3B'%3B%20%0D%0A%7Delse%7B%20%0D%0Acontainer.style.opacity%20%3D%20(opacity%20%3D%3D%201%20%3F%20''%20%3A%20''%20%2B%20opacity)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%2C%20%0D%0Ashow%3A%20function()%7B%20%0D%0Athis.container.style.visibility%20%3D%20'visible'%3B%20%0D%0Athis.visible%20%3D%20true%3B%20%0D%0A%7D%2C%20%0D%0Ahide%3A%20function()%7B%20%0D%0Athis.container.style.visibility%20%3D%20'hidden'%3B%20%0D%0Athis.visible%20%3D%20false%3B%20%0D%0A%7D%2C%20%0D%0Aattr%3A%20function(el%2C%20name%2C%20val)%7B%20%0D%0Aif(val%20%3D%3D%3D%20undefined)%7B%20%0D%0Areturn%20el.getAttribute(name)%3B%20%0D%0A%7Delse%7B%20%0D%0Ael.setAttribute(name%2Cval)%3B%20%0D%0Aname%3D%3D'class'%20%26%26%20(el.className%20%3D%20val)%3B%20%0D%0A%7D%20%0D%0A%7D%2C%20%0D%0Aon%3A%20function(el%2C%20type%2C%20fn)%7B%20%0D%0Ael.addEventListener%20%3F%20el.addEventListener(type%2C%20fn%2C%20false)%20%3A%20el.attachEvent('on'%20%2B%20type%2C%20fn)%3B%20%0D%0A%7D%2C%20%0D%0Aun%3A%20function(el%2C%20type%2C%20fn)%7B%20%0D%0Ael.removeEventListener%20%3F%20el.removeEventListener(type%2C%20fn%2C%20false)%20%3A%20el.detachEvent('on'%20%2B%20type%2C%20fn)%3B%20%0D%0A%7D%2C%20%0D%0Abrow%3A%20function(ua)%7B%20%0D%0Areturn%20%7B%20%0D%0Aie%3A%20%2Fmsie%2F.test(ua)%20%26%26%20!%2Fopera%2F.test(ua)%2C%20%0D%0Aopera%3A%20%2Fopera%2F.test(ua)%2C%20%0D%0Afirefox%3A%20%2Ffirefox%2F.test(ua)%20%0D%0A%7D%3B%20%0D%0A%7D(navigator.userAgent.toLowerCase())%2C%20%0D%0AonKeyup%3A%20function(e)%7B%20%0D%0Avar%20container%20%3D%20this.container%2C%20input%20%3D%20this.input%2C%20iCls%20%3D%20this.itemCls%2C%20aCls%20%3D%20this.activeCls%3B%20%0D%0Aif(this.visible)%7B%20%0D%0Aswitch(e.keyCode)%7B%20%0D%0Acase%2013%3A%20%2F%2F%20Enter%20%0D%0Aif(this.active)%7B%20%0D%0Ainput.value%20%3D%20this.active.firstChild.data%3B%20%0D%0Athis.hide()%3B%20%0D%0A%7D%20%0D%0Areturn%3B%20%0D%0Acase%2038%3A%20%2F%2F%20%E6%96%B9%E5%90%91%E9%94%AE%E4%B8%8A%20%0D%0Aif(this.active%3D%3Dnull)%7B%20%0D%0Athis.active%20%3D%20container.lastChild%3B%20%0D%0Athis.attr(this.active%2C%20'class'%2C%20aCls)%3B%20%0D%0Ainput.value%20%3D%20this.active.firstChild.data%3B%20%0D%0A%7Delse%7B%20%0D%0Aif(this.active.previousSibling!%3Dnull)%7B%20%0D%0Athis.attr(this.active%2C%20'class'%2C%20iCls)%3B%20%0D%0Athis.active%20%3D%20this.active.previousSibling%3B%20%0D%0Athis.attr(this.active%2C%20'class'%2C%20aCls)%3B%20%0D%0Ainput.value%20%3D%20this.active.firstChild.data%3B%20%0D%0A%7Delse%7B%20%0D%0Athis.attr(this.active%2C%20'class'%2C%20iCls)%3B%20%0D%0Athis.active%20%3D%20null%3B%20%0D%0Ainput.focus()%3B%20%0D%0Ainput.value%20%3D%20input.getAttribute(%22curr_val%22)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Areturn%3B%20%0D%0Acase%2040%3A%20%2F%2F%20%E6%96%B9%E5%90%91%E9%94%AE%E4%B8%8B%20%0D%0Aif(this.active%3D%3Dnull)%7B%20%0D%0Athis.active%20%3D%20container.firstChild%3B%20%0D%0Athis.attr(this.active%2C%20'class'%2C%20aCls)%3B%20%0D%0Ainput.value%20%3D%20this.active.firstChild.data%3B%20%0D%0A%7Delse%7B%20%0D%0Aif(this.active.nextSibling!%3Dnull)%7B%20%0D%0Athis.attr(this.active%2C%20'class'%2C%20iCls)%3B%20%0D%0Athis.active%20%3D%20this.active.nextSibling%3B%20%0D%0Athis.attr(this.active%2C%20'class'%2C%20aCls)%3B%20%0D%0Ainput.value%20%3D%20this.active.firstChild.data%3B%20%0D%0A%7Delse%7B%20%0D%0Athis.attr(this.active%2C%20'class'%2C%20iCls)%3B%20%0D%0Athis.active%20%3D%20null%3B%20%0D%0Ainput.focus()%3B%20%0D%0Ainput.value%20%3D%20input.getAttribute(%22curr_val%22)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Areturn%3B%20%0D%0A%7D%20%0D%0A%2F%2F%20%E7%83%88%E7%81%AB%E7%B6%B2%20lieh%EF%BD%95%EF%BD%8F%EF%BC%8E%EF%BD%8E%EF%BD%85t%20%E6%AC%A2%E8%BF%8E%E5%A4%8D%E5%88%B6%2C%E6%8B%92%E7%BB%9D%E6%81%B6%E6%84%8F%E9%87%87%E9%9B%86%20%EF%BD%96%EF%BD%85%EF%BD%92%EF%BD%99%EF%BD%88%EF%BD%95%EF%BD%8F%EF%BC%8E%EF%BC%A3%EF%BC%AF%EF%BD%8D%20%0D%0A%7D%20%0D%0Aif(e.keyCode%3D%3D27)%7B%20%2F%2F%20ESC%E9%94%AE%20%0D%0Athis.hide()%3B%20%0D%0Ainput.value%20%3D%20this.attr(input%2C'curr_val')%3B%20%0D%0Areturn%3B%20%0D%0A%7D%20%0D%0Aif(input.value.indexOf('%40')!%3D-1)%7Breturn%3B%7D%20%0D%0Athis.items%20%3D%20%5B%5D%3B%20%0D%0Aif(this.attr(input%2C'curr_val')!%3Dinput.value)%7B%20%0D%0Athis.container.innerHTML%20%3D%20''%3B%20%0D%0Afor(var%20i%3D0%2Clen%3Dthis.data.length%3Bi%3Clen%3Bi%2B%2B)%7B%20%0D%0Avar%20item%20%3D%20this.%24C('div')%3B%20%0D%0Athis.attr(item%2C%20'class'%2C%20this.itemCls)%3B%20%0D%0Aitem.innerHTML%20%3D%20input.value%20%2B%20'%40'%20%2B%20this.data%5Bi%5D%3B%20%0D%0Athis.items%5Bi%5D%20%3D%20item%3B%20%0D%0Athis.container.appendChild(item)%3B%20%0D%0A%7D%20%0D%0Athis.attr(input%2C'curr_val'%2Cinput.value)%3B%20%0D%0A%7D%20%0D%0Athis.show()%3B%20%0D%0A%7D%2C%20%0D%0AonMouseover%3A%20function()%7B%20%0D%0Avar%20_this%20%3D%20this%2C%20icls%20%3D%20this.itemCls%2C%20acls%20%3D%20this.activeCls%3B%20%0D%0Athis.on(this.container%2C'mouseover'%2Cfunction(e)%7B%20%0D%0Avar%20target%20%3D%20e.target%20%7C%7C%20e.srcElement%3B%20%0D%0Aif(target.className%20%3D%3D%20icls)%7B%20%0D%0Aif(_this.active)%7B%20%0D%0A_this.active.className%20%3D%20icls%3B%20%0D%0A%7D%20%0D%0Atarget.className%20%3D%20acls%3B%20%0D%0A_this.active%20%3D%20target%3B%20%0D%0A%7D%20%0D%0A%7D)%3B%20%0D%0A%7D%2C%20%0D%0AonMousedown%3A%20function()%7B%20%0D%0Avar%20_this%20%3D%20this%3B%20%0D%0Athis.on(this.container%2C'mousedown'%2Cfunction(e)%7B%20%0D%0Avar%20target%20%3D%20e.target%20%7C%7C%20e.srcElement%3B%20%0D%0A_this.input.value%20%3D%20target.innerHTML%3B%20%0D%0A_this.hide()%3B%20%0D%0A%7D)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Awindow.onload%20%3D%20function()%7B%20%0D%0Avar%20sinaSuggest%20%3D%20new%20InputSuggest(%7B%20%0D%0Ainput%3A%20document.getElementById('sina')%2C%20%0D%0Adata%3A%20%5B'sina.cn'%2C'sina.com'%2C'vip.sina.com.cn'%2C'2008.sina.com'%2C'263.sina.com'%5D%20%0D%0A%7D)%3B%20%0D%0Avar%20sohuSuggest%20%3D%20new%20InputSuggest(%7B%20%0D%0Awidth%3A%20300%2C%20%0D%0Aopacity%3A%200.3%2C%20%0D%0Ainput%3A%20document.getElementById('sohu')%2C%20%0D%0Adata%3A%20%5B'sohu.com'%2C'sogou.com'%2C'chinaren.com'%2C'vip.sohu.com'%2C'sohu.net'%2C'2008.sohu.com'%2C'sms.sohu.com'%5D%20%0D%0A%7D)%3B%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> 
</head> 
<body> 
<div style="width:400px;margin:30px auto;text-align:center;"> 
<label>新浪</label> 
<input type="text" id="sina"/> 
<br><br><br><br><br><br><br><br><br><br> 
<label>搜狐</label> 
<input type="text" id="sohu"/> 
</div> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程