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

像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> <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需刷新才能执行]

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