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需再刷新一下页面才能执行]

您可能感兴趣的文章:

JavaScript创建一个欢迎cookie弹出窗实现代码
欢迎cookie想必大家早有耳闻,利用cookie记录用户状态信息，当用户再次访问的时候弹出欢迎框，个人感觉还不错吧，希望对你学习cookie有所帮助
2013-03-03
用原生JS获取CLASS对象(很简单实用)
这篇文章主要介绍了如何用原生JS获取CLASS对象，看过dom编程艺术的朋友或许会知道的
2014-10-10
javascript 实现纯前端将数据导出excel两种方式
这篇文章主要介绍了javascript 实现纯前端将数据导出excel两种方式，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参一下
2022-07-07
echarts3 使用总结（绘制各种图表,地图）
本篇文章主要介绍了echarts3 使用总结，详细的介绍了各种柱状图、折线图、饼图、全国地图等的实现代码，有需要的可以了解一下。
2017-01-01
js中scrollTop()方法和scroll()方法用法示例
这篇文章主要介绍了js中scrollTop()方法和scroll()方法用法,结合实例形式分析了scrollTop()方法和scroll()方法滚动操作的用法与相关操作技巧,需要的朋友可以参考下
2016-10-10
JavaScript实现将阿拉伯数字转换成中文或大写中文的方法
现在有需求将亿元之内的阿拉伯数字转换成中文,例如：1234转换后变为一千二百三十四再转换成壹仟贰佰叁拾肆,所以本文给大家介绍了用JavaScript实现将阿拉伯数字转换成中文大写,感兴趣的小伙伴跟着小编一起来看看吧
2024-11-11
HTML5+setCutomValidity()函数验证表单实例分享
本文给大家分享的是在HTML5中结合setCutomValidity()函数实现验证表单的实例，非常的时间实用，这里推荐给大家，有需要的小伙伴可以参考下。
2015-04-04
JavaScript 中的 `==` 和 `===` 操作符详解
在 JavaScript 中,== 和 === 是两个常用的比较操作符,分别用于宽松相等（类型转换相等）和严格相等（类型和值必须相等）的比较,理解它们的区别以及具体的比较规则对于编写准确和高效的代码至关重要,需要的朋友可以参考下
2024-09-09
Javascript 构造函数,公有,私有特权和静态成员定义方法
其中公有方法声明的部分采用的两种方式，在实际应用中一般采取一种方式就可以了，如果两种方式都要采用的话，应注意顺序，防止前面写的方法被清空或覆盖。
2009-11-11
JavaScript 语言基础知识点总结（思维导图）
这篇文章通过思维导图格式总结了JavaScript 语言基础知识点，想要学习js的朋友可以参考下
2013-11-11

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具