上篇文章写到了一个不错的jquery实现邮箱输入自动提示功能,发现还有一个不错的自动提示插件:

先展示结果如图:

html代码:

<center>
<h1>输入邮箱试试!</h1>
<br />
<div class="parentCls"><input type="text" class="inputElem"></div>
</center>

css代码:

@charset "utf-8";
* {    outline:none;margin:0;padding:0;font-family:microsoft yahei;
}
ul, li {list-style:none;
}
.inputElem {width:198px;height:22px;line-height:22px;border:1px solid #ccc;
}
.parentCls {width:200px;height:auto; margin:0 auto;
}
.auto-tip li {width:100%;text-align:left;height:22px;line-height:22px;font-size:14px;
}.auto-tip li.hoverBg {background:#ddd;cursor:pointer;
}
.auto-tip li em{font-style:normal;}
.red {color:#333;
}
.hidden {display:none;
}

jquery代码:

/*** 邮箱自动提示插件* @constructor EmailAutoComplete* @ options {object} 可配置项*/function EmailAutoComplete(options) {this.config = {targetCls      :  '.inputElem',       // 目标input元素parentCls      :  '.parentCls',       // 当前input元素的父级类hiddenCls      :  '.hiddenCls',       // 当前input隐藏域 searchForm     :  '.jqtransformdone', //form表单hoverBg        :  'hoverBg',          // 鼠标移上去的背景inputValColor  :  'black',              // 输入框输入提示颜色mailArr        : ["@qq.com","@gmail.com","@126.com","@163.com","@hotmail.com","@yahoo.com","@yahoo.com.cn","@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();});}
};

View Code

调用方式:

// 初始化
$(function() {new EmailAutoComplete({});
});

需要查看例子,请点击下载demo

转载于:https://www.cnblogs.com/moqiutao/p/4853991.html

jQuery 实现邮箱输入自动提示功能:(二)相关推荐

  1. 仿新浪邮件输入自动提示jQuery插件

    一个邮箱提示控件,会自动提示你已经预设的邮箱! /** /** * 邮件输入自动提示插件 * author Newton * $('id').mailTip({ * mails: [], 需要提示的邮 ...

  2. java 输入提示_Java实现输入自动提示与补全功能

    一. 场景与目标 在使用 IDE 开发软件时, IDE 会提供一种"智能提示", 根据所输入的字符列出可能的词组: 在日常Web开发中,根据用户输入进行自动提示和补全,也能很好地改 ...

  3. html邮箱下拉栏,jQuery实现邮箱下拉列表自动补全功能

    记得,在上个项目中,遇到这样一个需求,网站要求填写邮箱的时候,还没有填写完,就会出现一系列下拉列表,帮助自动补全邮箱的功能.今天小编给给大家分享下我基于jquery是怎么实现此功能的! 功能简述 •填 ...

  4. Eclipse输入Java和XML代码自动提示功能最简单的方法

    Eclipse输入Java和XML代码自动提示功能 1.设置 java 文件的代码提示功能 打 开 Eclipse 依次选择 Window > Preferences > Java > ...

  5. 仿百度,谷歌输入框自动提示功能

    大家使用百度谷歌的时候都会有输入自动提示的功能,心血来潮自己用Ajax模拟了一个,和大家分享分享. 下面让我们先看下效果: 输入自动提示 键盘上下移动选取 鼠标选取同样支持   支持中文匹配   JS ...

  6. 通过jQuery实现淘宝搜索提示功能

    一.先来展示下功能: 淘宝搜索提示功能 二.实现: 1.大体实现思路: 先从input框里获得输入的内容,再把得到的内容通过jQuery封装的ajax以jsonp的形式发送出去.接着把响应回来的数据渲 ...

  7. Ajax实现百度搜索框自动提示功能

    Ajax实现百度搜索框自动提示功能 当你在搜索框内写入关键字时下拉框会匹配和你输入的关键字相匹配的信息 文章目录 Ajax实现百度搜索框自动提示功能 一.实现效果 二.代码实现 1.前端页面 2.后端 ...

  8. eclipse hibernate配置文件(*.hbm.xml)加上自动提示功能

    转自:https://blog.csdn.net/u012217085/article/details/17397843?utm_source=blogkpcl3 1. 标签:hibernate 在编 ...

  9. 怎样增强MyEclipse的代码自动提示功能

    转载自  怎样增强MyEclipse的代码自动提示功能 MyElipse的默认代码提示功能隐藏了许多细节,需要开发者手动设置,一起来设置吧,让你的myeclpse更强大 一般在Eclipse ,MyE ...

  10. SQLSERVER:sqlserver2008r2安装好后,自动提示功能不可以使用

    刚安装好的sqlserver2008r2x64,写一些sql时,自动提示功能失效了. 解决排查一: 找到tools->options->Text Editor->Transact-S ...

最新文章

  1. Android 购物车图片上面添加数字
  2. 根据总用量计算每种包装规格的购买量和总价
  3. 验证RIP被动接口只收不发的正确性
  4. SpringMVC 如何配置aop
  5. 手机mvno怎么设置_微信透明背景壁纸怎么弄 手机设置方法教程分享
  6. Android Telephony分析(二) ---- RegistrantList详解
  7. SQLSERVER 和 ORACLE 查询数据库文件大小
  8. html模板安装到织梦,织梦网站安装教程 织梦模板通用安装图文教程
  9. 面试精讲之面试考点及大厂真题 - 分布式专栏 10 Redis雪崩,穿透,击穿三连问
  10. 告别抠图!海量免抠PNG,任你选
  11. raid 物理盘缓存状态_CDN与其他层面缓存
  12. mybatis基于注解(三)
  13. 橱柜高度与身高对照表_厨房台面高度是多少 厨房台面如何选购
  14. python爬虫什么意思-Python爬虫可以做什么?
  15. 常用算法2 - 广度优先搜索 深度优先搜索 (python实现)
  16. 如何将你的 MySQL 查询速度提升 300 倍
  17. VBA连接Excel数据库
  18. “非常晚餐”第一期 “3D虚拟世界”是“黑客帝国”吗?
  19. 纹理分析方法:共生矩阵的计算
  20. 圆桌实录 | 为什么不约而同选择了大 Kernel

热门文章

  1. C++ set 多级排序 多维度排序
  2. 区块链 使用xbench测试xuperchain 教程
  3. FISCO BCOS Solidity 智能合约 批量插入新增数据
  4. ubuntu 时间戳不对
  5. java统计字符串数字出现次数_java实现统计字符串中大写字母,小写字母及数字出现次数的方法示例...
  6. java之Stream流
  7. 两台服务器ubuntu20.x 直接文件共享,文件挂载 nfs
  8. Kubernetes(K8s) 1.14.3 单机版配置 node 节点 是 taint 时解决方法
  9. ReflectionUtils.invokeMethod的作用
  10. http实时推送技术