JS输入用户名自动显示邮箱后缀列表的方法
来源:互联网 发布:蓝光主板端口说明 编辑:程序博客网 时间:2024/05/01 07:09
主要介绍了JS输入用户名自动显示邮箱后缀列表的方法,可实现自动显示邮箱后缀名列表的功能,
原理是:一个输入框 当我输入任何字的时候 自动下拉相应的邮箱提示,在输入框输入11的时候 下拉框有所有11的邮箱 输入其他的时候 有其他文案对应的邮箱。
同理 此插件不需要任何html标签,只需要一个输入框 有相对应的class类名就ok 且父级有个class类名,其他的都不需要。内部的HTML代码都是自动生成的
只需要在input输入框 且父级元素添加一个如上class(自定义也可以,只是在JS初始化的时候要传入class就ok 我默认情况下 父级class叫parentCls,当前输入框class叫inputElem,隐藏域的class叫hiddenCls,在初始化的时候 直接初始化 传入空对象即可!),就像这样就可以了
<div class="parentCls"> <input type="text" class="inputElem" name="email" /> </div>css代码如下:
<style>*{margin:0;padding:0;} .parentCls{width:200px;}.auto-tip li{width:100%;height:22px;line-height:22px;font-size:14px;list-style-type:none; background:#FFF}.auto-tip li.hoverBg{background:#ddd;cursor:pointer;}.red{color:red;}.hidden {display:none;} </style>
这样在调用这个js代码就可以实现其功能;
function EmailAutoComplete(options) {this.config = {targetCls : '.inputElem', // 目标input元素parentCls : '.parentCls', // 当前input元素的父级类hiddenCls : '.hiddenCls', // 当前input隐藏域 searchForm : '.jqtransformdone', //form表单hoverBg : 'hoverBg', // 鼠标移上去的背景inputValColor : 'red', // 输入框输入提示颜色mailArr : ["","@qq.com","@gmail.com","@126.com","@163.com","@yahoo.com","@live.com","@sohu.com","@sina.com"], //邮箱数组isSelectHide : true, // 点击下拉框 是否隐藏 默认为truecallback : null // 点击某一项回调函数};this.cache = {onlyFlag : true, // 只渲染一次currentIndex : -1, oldIndex : -1};this.init(options); }EmailAutoComplete.prototype = {constructor: EmailAutoComplete,init: function(options){this.config = $.extend(this.config,options || {});var self = this,_config = self.config,_cache = self.cache;$(_config.targetCls).each(function(index,item){$(item).keyup(function(e){var target = e.target,targetVal = $.trim($(this).val()),keycode = e.keyCode,elemHeight = $(this).outerHeight(),elemWidth = $(this).outerWidth(),parentNode = $(this).closest(_config.parentCls);$(parentNode).css({'position':'relative'});// 如果输入框值为空的话 那么下拉框隐藏if(targetVal == '') {$(item).attr({'data-html':''});// 给隐藏域赋值$(_config.hiddenCls,parentNode).val('');_cache.currentIndex = -1;_cache.oldIndex = -1;$(".auto-tip",parentNode) && !$(".auto-tip",parentNode).hasClass('hidden') && $(".auto-tip",parentNode).addClass('hidden');self._removeBg(parentNode);}else {$(item).attr({'data-html':targetVal});// 给隐藏域赋值$(_config.hiddenCls,parentNode).val(targetVal);$(".auto-tip",parentNode) && $(".auto-tip",parentNode).hasClass('hidden') && $(".auto-tip",parentNode).removeClass('hidden');// 渲染下拉框内容self._renderHTML({keycode:keycode,e:e,target:target,targetVal:targetVal,height:elemHeight,width:elemWidth,parentNode:parentNode});}});}); // 阻止form表单默认enter键提交 $(_config.searchForm).each(function(index,item) {$(item).keydown(function(e){ var keyCode = e.keyCode; if(keyCode == 13) { return false; }}); }); // 点击文档document时候 下拉框隐藏掉 $(document).click(function(e){ e.stopPropagation(); var target = e.target, tagCls = _config.targetCls.replace(/^\./,''); if(!$(target).hasClass(tagCls)) { $('.auto-tip') && $('.auto-tip').each(function(index,item){ !$(item).hasClass('hidden') && $(item).addClass('hidden'); }); } });},/* * 渲染下拉框提示内容 * @param cfg{object} */_renderHTML: function(cfg) {var self = this,_config = self.config,_cache = self.cache,curVal;var curIndex = self._keyCode(cfg.keycode);$('.auto-tip',cfg.parentNode).hasClass('hidden') && $('.auto-tip',cfg.parentNode).removeClass('hidden');if(curIndex > -1){// 键盘上下操作self._keyUpAndDown(cfg.targetVal,cfg.e,cfg.parentNode);}else {if(/@/.test(cfg.targetVal)) {curVal = cfg.targetVal.replace(/@.*/,'');}else {curVal = cfg.targetVal;}if(_cache.onlyFlag) {$(cfg.parentNode).append('<input type="hidden" class="hiddenCls"/>');var wrap = '<ul class="auto-tip">';for(var i = 0; i < _config.mailArr.length; i++) {wrap += '<li class="p-index'+i+'">'+'<span class="output-num"></span><em class="em" data-html="'+_config.mailArr[i]+'">'+_config.mailArr[i]+'</em></li>';}wrap += '</ul>';_cache.onlyFlag = false;$(cfg.parentNode).append(wrap);$('.auto-tip',cfg.parentNode).css({'position':'absolute','top':cfg.height,'width':cfg.width - 2 + 'px','left':0,'border':'1px solid #ccc','z-index':10000});}// 给所有li添加属性 data-html$('.auto-tip li',cfg.parentNode).each(function(index,item){$('.output-num',item).html(curVal);!$('.output-num',item).hasClass(_config.inputValColor) && $('.output-num',item).addClass(_config.inputValColor);var emVal = $.trim($('.em',item).attr('data-html'));$(item).attr({'data-html':curVal + '' +emVal});});// 精确匹配内容self._accurateMate({target:cfg.target,parentNode:cfg.parentNode});// 鼠标移到某一项li上面时候self._itemHover(cfg.parentNode);// 点击对应的项时self._executeClick(cfg.parentNode);}},/** * 精确匹配某项内容 */_accurateMate: function(cfg) {var self = this,_config = self.config,_cache = self.cache;var curVal = $.trim($(cfg.target,cfg.parentNode).attr('data-html')),newArrs = [];if(/@/.test(curVal)) {// 获得@ 前面 后面的值var prefix = curVal.replace(/@.*/, ""),suffix = curVal.replace(/.*@/, "");$.map(_config.mailArr,function(n){var reg = new RegExp(suffix);if(reg.test(n)) {newArrs.push(n);}});if(newArrs.length > 0) {$('.auto-tip',cfg.parentNode).html('');$(".auto-tip",cfg.parentNode) && $(".auto-tip",cfg.parentNode).hasClass('hidden') && $(".auto-tip",cfg.parentNode).removeClass('hidden');var html = '';for(var j = 0, jlen = newArrs.length; j < jlen; j++) {html += '<li class="p-index'+j+'">'+'<span class="output-num"></span><em class="em" data-html="'+newArrs[j]+'">'+newArrs[j]+'</em></li>';}$('.auto-tip',cfg.parentNode).html(html);// 给所有li添加属性 data-html$('.auto-tip li',cfg.parentNode).each(function(index,item){$('.output-num',item).html(prefix);!$('.output-num',item).hasClass(_config.inputValColor) && $('.output-num',item).addClass(_config.inputValColor);var emVal = $.trim($('.em',item).attr('data-html'));$(item).attr('data-html','');$(item).attr({'data-html':prefix + '' +emVal});});// 精确匹配到某项时候 让当前的索引等于初始值_cache.currentIndex = -1;_cache.oldIndex = -1;$('.auto-tip .output-num',cfg.parentNode).html(prefix);// 鼠标移到某一项li上面时候self._itemHover(cfg.parentNode);// 点击对应的项时self._executeClick(cfg.parentNode);}else {$(".auto-tip",cfg.parentNode) && !$(".auto-tip",cfg.parentNode).hasClass('hidden') && $(".auto-tip",cfg.parentNode).addClass('hidden');$('.auto-tip',cfg.parentNode).html('');}}},/* * 鼠标移到某一项li上时 */_itemHover: function(parentNode) {var self = this,_config = self.config,_cache = self.cache;$('.auto-tip li',parentNode).hover(function(index,item) {!$(this).hasClass(_config.hoverBg) && $(this).addClass(_config.hoverBg);},function() {$(this).hasClass(_config.hoverBg) && $(this).removeClass(_config.hoverBg);});},/* * 当输入框值为空时候 li项都删掉class hoverBg */_removeBg: function(parentNode){var self = this,_config = self.config;$(".auto-tip li",parentNode).each(function(index,item){$(item).hasClass(_config.hoverBg) && $(item).removeClass(_config.hoverBg);});},/** * 键盘上下键操作 */ _keyUpAndDown: function(targetVal,e,parentNode) {var self = this,_cache = self.cache,_config = self.config;// 如果请求成功后 返回了数据(根据元素的长度来判断) 执行以下操作if($('.auto-tip' + ' li',parentNode) && $('.auto-tip' + ' li').length > 0) {var plen = $('.auto-tip' + ' li',parentNode).length,keyCode = e.keyCode;_cache.oldIndex = _cache.currentIndex;// 上移操作if(keyCode == 38) {if(_cache.currentIndex == -1) {_cache.currentIndex = plen - 1;}else {_cache.currentIndex = _cache.currentIndex - 1;if(_cache.currentIndex < 0) {_cache.currentIndex = plen - 1;}}if(_cache.currentIndex !== -1) {!$('.auto-tip .p-index'+_cache.currentIndex,parentNode).hasClass(_config.hoverBg) && $('.auto-tip .p-index'+_cache.currentIndex,parentNode).addClass(_config.hoverBg).siblings().removeClass(_config.hoverBg);var curAttr = $('.auto-tip' + ' .p-index'+_cache.currentIndex,parentNode).attr('data-html');$(_config.targetCls,parentNode).val(curAttr);// 给隐藏域赋值$(_config.hiddenCls,parentNode).val(curAttr);}}else if(keyCode == 40) { //下移操作if(_cache.currentIndex == plen - 1) {_cache.currentIndex = 0;}else {_cache.currentIndex++;if(_cache.currentIndex > plen - 1) {_cache.currentIndex = 0;}}if(_cache.currentIndex !== -1) {!$('.auto-tip .p-index'+_cache.currentIndex,parentNode).hasClass(_config.hoverBg) && $('.auto-tip .p-index'+_cache.currentIndex,parentNode).addClass(_config.hoverBg).siblings().removeClass(_config.hoverBg);var curAttr = $('.auto-tip' + ' .p-index'+_cache.currentIndex,parentNode).attr('data-html');$(_config.targetCls,parentNode).val(curAttr);// 给隐藏域赋值$(_config.hiddenCls,parentNode).val(curAttr);}}else if(keyCode == 13) { //回车操作var curVal = $('.auto-tip' + ' .p-index'+_cache.oldIndex,parentNode).attr('data-html');$(_config.targetCls,parentNode).val(curVal);// 给隐藏域赋值$(_config.hiddenCls,parentNode).val(curVal);if(_config.isSelectHide) { !$(".auto-tip",parentNode).hasClass('hidden') && $(".auto-tip",parentNode).addClass('hidden'); } _config.callback && $.isFunction(_config.callback) && _config.callback();_cache.currentIndex = -1;_cache.oldIndex = -1;}} }, _keyCode: function(code) { var arrs = ['17','18','38','40','37','39','33','34','35','46','36','13','45','44','145','19','20','9']; for(var i = 0, ilen = arrs.length; i < ilen; i++) { if(code == arrs[i]) { return i; } } return -1; },/** * 当数据相同的时 点击对应的项时 返回数据 */ _executeClick: function(parentNode) { var _self = this, _config = _self.config; $('.auto-tip' + ' li',parentNode).unbind('click'); $('.auto-tip' + ' li',parentNode).bind('click',function(e){ var dataAttr = $(this).attr('data-html'); $(_config.targetCls,parentNode).val(dataAttr); if(_config.isSelectHide) { !$(".auto-tip",parentNode).hasClass('hidden') && $(".auto-tip",parentNode).addClass('hidden'); } // 给隐藏域赋值 $(_config.hiddenCls,parentNode).val(dataAttr); _config.callback && $.isFunction(_config.callback) && _config.callback(); }); }};// 初始化$(function() {new EmailAutoComplete({});});最后结果就像这样:
0 0
- JS输入用户名自动显示邮箱后缀列表的方法
- JS输入用户名自动显示邮箱后缀列表
- 用面向对象解决 输入用户名自动显示邮箱后缀列表的方法
- 2种方法,当文本框输入@自动补全邮箱后缀(特别是命名空间的引用,共三种方法)
- 【Android】自定义控件实现自动补齐邮箱后缀的输入框
- js用户名邮箱唯一性的验证
- 自动填充邮箱后缀
- IOS邮箱登录下拉提示列表--输入邮箱自动填充提示列表(附gif+源码)
- 自动配置邮箱的方法
- AutoCompleteTextView自动填充邮箱后缀
- js对输入用户名的限制
- js验证用户名的方法
- js实现的邮箱自动补全
- 手机号、邮箱或者用户名登录的实现方法
- 邮箱自动填充js
- 邮箱自动下拉匹配列表
- 编写代码时如何使Eclipse自动显示提示输入的列表
- 输入框-邮箱自动补充
- Web Api简单用法
- 理解Java ClassLoader机制(转载)
- Python实用入门
- 开源日志系统比较:scribe、chukwa、kafka、flume
- 手机查看测试中的网页
- JS输入用户名自动显示邮箱后缀列表的方法
- WebApplicationContext里面的一些特殊的bean
- C#之正则表达式验证
- Hive 之使用mysql作为hive的metastore
- !HDU 4380 三角屋内有奇数个宝藏的三角形有多少个-计算几何-(向量叉乘&线段与点的关系&暴力枚举)
- CasperJS API介绍(1)-- CasperJS Class
- C++中overload,override,overwrite的区别详细解析
- ACM 计算几何模板 点在三角形内
- 开源远程登录、远程查看工具你知道几个