inputSuggest邮箱提示自动补全js插件

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……

例子：

window.onload = 

function () {var regSuggest = new InputSuggest({input: document.getElementById('rEmail'),data: ['qq.com', '163.com', 'sina.com', 'vip.sina.com', '126.com', 'hotmail.com', 'sina.cn','gmail.com', 'sohu.com', 'yahoo.cn', '139.com', 'wo.com.cn', '189.cn']});var logSuggest = new InputSuggest({input: document.getElementById('lEmail'),data: ['qq.com', '163.com', 'sina.com', 'vip.sina.com', '126.com', 'hotmail.com', 'sina.cn','gmail.com', 'sohu.com', 'yahoo.cn', '139.com', 'wo.com.cn', '189.cn']});
}

<!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前发生，这里使用mousedownthis.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: // Enterif(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;}}    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>

js代码：

View Code

/*** 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* });*/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前发生，这里使用mousedownthis.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: // Enterif(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;}}    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();});}
}

inputSuggest邮箱提示自动补全js插件相关推荐

html邮箱下拉栏,jQuery实现邮箱下拉列表自动补全功能
记得,在上个项目中,遇到这样一个需求,网站要求填写邮箱的时候,还没有填写完,就会出现一系列下拉列表,帮助自动补全邮箱的功能.今天小编给给大家分享下我基于jquery是怎么实现此功能的! 功能简述 •填 ...
jQuery搜索框自动补全功能插件实现-autocomplete.js
最近用nodeclub实现股票的输入关键字自动补全股票信息进行搜索功能,原先用jQuery-ui,结果jQuery-ui库太大,所以考虑用其他插件,最终选择使用autocomplete.js,控件简单 ...
JS实现在输入框内输入@时，邮箱账号自动补全
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8&quo ...
Idea代码自动补全！插件推荐：Codota，再也不用担心写不出代码了。
前言最近,有小伙伴推荐给D哥一款IDEA插件,叫我一定得给大家分享一下,简直太好用了~ 这款插件解决的痛点:当你不知道一个类该怎么用的时候,它能帮你快速找到想要的实例代码. 群里有不少同学说,&qu ...
linux自动补全命令插件,vim自动补全插件snipMate
linux下安装vim自动补全插件snipMate 环境:ubuntu 下载snipMate 官方网站:http://www.vim.org/scripts/script.php?script_id= ...
仿新浪微博登录的邮箱地址自动补全功能
首先,来看一下登录新浪微博的效果图: 当你开始输入你的电子邮箱前的帐号时,就会出现常用邮箱的列表,并自动补齐. 实现的时候,首先在页面上放一个输入文本框和一个div.将div隐藏: 电子邮件:< ...
高效办公小工具：AutoHotkey（进阶版）——自定义组合键打开指定应用与网页，手机号邮箱等自动补全
高效办公小工具:AutoHotkey--自定义快捷键与自动填充使用方法: 1.安装下载文件中的exe程序 2.新建TXT文档,将后缀名改为.ahk 3.使用npp打开该文件,进行自定义设置(npp下 ...
Android实现登录邮箱的自动补全功能
Android SDK 提供了MultiAutoCompleteTextView 控件,可以支持从指定字符开始联想.MultiAutoCompleteTextView 通过分词器 Tokenizer, ...
vim插件自动补齐_(转）Vim自动补全神器：YouCompleteMe
原文出处:http://blog.jobbole.com/58978/ 第一次听说这个插件还是在偶然的情况下看到别人的博客,听说了这个插件的大名.本来打算在实训期间来完成安装的,无奈网实在不给力,也就 ...

inputSuggest邮箱提示自动补全js插件

inputSuggest邮箱提示自动补全js插件相关推荐

最新文章

热门文章