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

更新时间：2012年05月19日 14:43:18 作者：

inputSuggest在文本框输入字符时提示，类似Windows的“自动完成”功能，当在文本框输入字符时，与此相关的内容会显示在文本框的下边，你可随时使用键盘或鼠标点选那些提示，你就不用输入了

像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/
完整源码下载：https://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需再刷新一下页面才能执行]

您可能感兴趣的文章:

CSS javascript 结合实现悬浮固定菜单效果
本篇文章给大家介绍基于CSS javascript 结合实现悬浮固定菜单效果，附有源码下载，需要的朋友可以参考下
2015-08-08
细品javascript 寻址,闭包,对象模型和相关问题
似乎某些程序员的集合是不相交的，就好像JS程序员和玩编译原理和CPU指令的汇编程序员就几乎没有交叉。前些日子讨论的火热的“作用域链”问题，说白了就是寻址问题，不过，这个在C中十分简单的问题却被JS这个动态语言弄得很复杂。
2009-04-04
javascript实现移动端轮播图
这篇文章主要为大家详细介绍了javascript实现移动端轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-12-12
bootstrap多种样式进度条展示
这篇文章主要为大家展示了bootstrap多种样式进度条，默认进度条、条纹进度条等，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
让你的博文自动带上缩址的实现代码，方便发到微博客上
添加以下代码到你的博客中: (呵呵，抄袭至lulu Studio http://s8.hk/0itw)
2010-12-12
JavaScript异步调用定时方法并停止该方法实现代码
JavaScript异步调用定时方法并停止该方法实现代码，需要的朋友可以参考下
2012-03-03
js模拟QQ窗口的抖动效果
模拟qq抖动效果代码
2008-05-05
JS如何修改对象数组的key值
这篇文章主要介绍了JS如何修改对象数组的key值,使用map循环,在map循环内创建一个新对象,将item要改变的key赋给新创建的对象里面新key值,然后push给一个新创建的数组dataNew即可,需要的朋友可以参考下
2024-02-02
一个极为简单的requirejs实现方法
下面小编就为大家带来一篇一个极为简单的requirejs实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-10-10
uniapp的webview实现左滑返回上一个页面操作方法
uniapp默认左滑是关闭整个webview,而不是关闭当前页,本文给大家介绍uniapp的webview实现左滑返回上一个页面操作方法,感兴趣的朋友一起看看吧
2023-12-12