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.jb51.net/js/2012/inputSuggest/
完整源码下载：http://www.jb51.net/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> <script type="text/javascript"> function InputSuggest（opt）{ this.win = null; this.doc = null; this.container = null; this.items = null; this.input = opt.input || null; this.containerCls = opt.containerCls || "suggest-container"; this.itemCls = opt.itemCls || "suggest-item"; this.activeCls = opt.activeCls || "suggest-active"; this.width = opt.width; this.opacity = opt.opacity; this.data = opt.data || []; this.active = null; this.visible = false; this.init（）; } InputSuggest.prototype = { init: function（）{ this.win = window; this.doc = window.document; this.container = this.$C（"div"）; this.attr（this.container, "class", this.containerCls）; this.doc.body.appendChild（this.container）; this.setPos（）; var _this = this, input = this.input; this.on（input,"keyup",function（e）{ if（input.value==""）{ _this.hide（）; }else{ _this.onKeyup（e）; } }）; // blur会在click前发生，这里使用mousedown this.on（input,"blur",function（e）{ _this.hide（）; }）; this.onMouseover（）; this.onMousedown（）; }, $C: function（tag）{ return this.doc.createElement（tag）; }, getPos: function （el）{ var pos=[0,0], a=el; if（el.getBoundingClientRect）{ var box = el.getBoundingClientRect（）; pos=[box.left,box.top]; }else{ while（a && a.offsetParent）{ pos[0] += a.offsetLeft; pos[1] += a.offsetTop; a = a.offsetParent } } return pos; }, setPos: function（）{ var input = this.input, pos = this.getPos（input）, brow = this.brow, width = this.width, opacity = this.opacity, container = this.container; container.style.cssText = "position:absolute;overflow:hidden;left:" + pos[0] + "px;top:" + （pos[1]+input.offsetHeight） + "px;width:" // IE6/7/8/9/Chrome/Safari input[type=text] border默认为2，Firefox为1，因此取offsetWidth-2保证与FF一致 + （brow.firefox ？ input.clientWidth : input.offsetWidth-2） + "px;"; if（width）{ container.style.width = width + "px"; } if（opacity）{ if（this.brow.ie）{ container.style.filter = "Alpha（Opacity=" + opacity * 100 + "）;"; }else{ container.style.opacity = （opacity == 1 ？ "" : "" + opacity）; } } }, show: function（）{ this.container.style.visibility = "visible"; this.visible = true; }, hide: function（）{ this.container.style.visibility = "hidden"; this.visible = false; }, attr: function（el, name, val）{ if（val === undefined）{ return el.getAttribute（name）; }else{ el.setAttribute（name,val）; name=="class" && （el.className = val）; } }, on: function（el, type, fn）{ el.addEventListener ？ el.addEventListener（type, fn, false） : el.attachEvent（"on" + type, fn）; }, un: function（el, type, fn）{ el.removeEventListener ？ el.removeEventListener（type, fn, false） : el.detachEvent（"on" + type, fn）; }, brow: function（ua）{ return { ie: /msie/.test（ua） && ！/opera/.test（ua）, opera: /opera/.test（ua）, firefox: /firefox/.test（ua） }; }（navigator.userAgent.toLowerCase（））, onKeyup: function（e）{ var container = this.container, input = this.input, iCls = this.itemCls, aCls = this.activeCls; if（this.visible）{ switch（e.keyCode）{ case 13: // Enter if（this.active）{ input.value = this.active.firstChild.data; this.hide（）; } return; case 38: // 方向键上 if（this.active==null）{ this.active = container.lastChild; this.attr（this.active, "class", aCls）; input.value = this.active.firstChild.data; }else{ if（this.active.previousSibling！=null）{ this.attr（this.active, "class", iCls）; this.active = this.active.previousSibling; this.attr（this.active, "class", aCls）; input.value = this.active.firstChild.data; }else{ this.attr（this.active, "class", iCls）; this.active = null; input.focus（）; input.value = input.getAttribute（"curr_val"）; } } return; case 40: // 方向键下 if（this.active==null）{ this.active = container.firstChild; this.attr（this.active, "class", aCls）; input.value = this.active.firstChild.data; }else{ if（this.active.nextSibling！=null）{ this.attr（this.active, "class", iCls）; this.active = this.active.nextSibling; this.attr（this.active, "class", aCls）; input.value = this.active.firstChild.data; }else{ this.attr（this.active, "class", iCls）; this.active = null; input.focus（）; input.value = input.getAttribute（"curr_val"）; } } return; } // 烈火網 liehｕｏ．ｎｅt 欢迎复制,拒绝恶意采集 ｖｅｒｙｈｕｏ．ＣＯｍ } if（e.keyCode==27）{ // ESC键 this.hide（）; input.value = this.attr（input,"curr_val"）; return; } if（input.value.indexOf（"@"）！=-1）{return;} this.items = []; if（this.attr（input,"curr_val"）！=input.value）{ this.container.innerHTML = ""; for（var i=0,len=this.data.length;i<len;i++）{ var item = this.$C（"div"）; this.attr（item, "class", this.itemCls）; item.innerHTML = input.value + "@" + this.data[i]; this.items[i] = item; this.container.appendChild（item）; } this.attr（input,"curr_val",input.value）; } this.show（）; }, onMouseover: function（）{ var _this = this, icls = this.itemCls, acls = this.activeCls; this.on（this.container,"mouseover",function（e）{ var target = e.target || e.srcElement; if（target.className == icls）{ if（_this.active）{ _this.active.className = icls; } target.className = acls; _this.active = target; } }）; }, onMousedown: function（）{ var _this = this; this.on（this.container,"mousedown",function（e）{ var target = e.target || e.srcElement; _this.input.value = target.innerHTML; _this.hide（）; }）; } } </script> <script type="text/javascript"> window.onload = function（）{ var sinaSuggest = new InputSuggest（{ input: document.getElementById（"sina"）, data: ["sina.cn","sina.com","vip.sina.com.cn","2008.sina.com","263.sina.com"] }）; var sohuSuggest = new InputSuggest（{ width: 300, opacity: 0.3, input: document.getElementById（"sohu"）, data: ["sohu.com","sogou.com","chinaren.com","vip.sohu.com","sohu.net","2008.sohu.com","sms.sohu.com"] }）; } </script> </head> <body><label>新浪</label> <input type="text" id="sina"/> <br><br><br><br><br><br><br><br><br><br> <label>搜狐</label> <input type="text" id="sohu"/></body> </html>

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