JS输入用户名自动显示邮箱后缀列表的方法


Posted in Javascript onJanuary 27, 2015

本文实例讲述了JS输入用户名自动显示邮箱后缀列表的方法。分享给大家供大家参考。具体如下:

以下是代码,保存到html文件打开:

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>输入用户名自动显示邮箱后缀列表</title>

<script type="text/javascript" src="jquery/jquery-1.10.2.min.js"></script>

<style>

*{margin:0;padding:0;}

ul,li{list-style:none;}

.inputElem {width:198px;height:22px;line-height:22px;border:1px solid #ff4455;}

.parentCls{width:200px;}

.auto-tip li{width:100%;height:22px;line-height:22px;font-size:14px;}

.auto-tip li.hoverBg{background:#ddd;cursor:pointer;}

.red{color:red;}

.hidden {display:none;}

</style>

<script type="text/javascript" src="js/emailAutoComplete.js"></script>

</head>

<body>

<div style="width:736px;margin:10px auto;">

请在下方输入邮箱用户名:

<div class="parentCls">

<input type="text" class="inputElem">

</div>

</div>

</body>

</html>

原理是:一个输入框 当我输入任何字的时候 自动下拉相应的邮箱提示,在输入框输入11的时候 下拉框有所有11的邮箱 输入其他的时候 有其他文案对应的邮箱。

同理 此插件不需要任何html标签,只需要一个输入框 有相对应的class类名就ok 且父级有个class类名,其他的都不需要。内部的HTML代码都是自动生成的。

HTML代码如下:

<div class="parentCls">

<input type="text" class="inputElem">

</div>

其实上面的div标签都可以不需要 只需要在input输入框 且父级元素添加一个如上class(自定义也可以,只是在JS初始化的时候要传入class就ok 我默认情况下 父级class叫parentCls,当前输入框class叫inputElem,隐藏域的class叫hiddenCls,在初始化的时候 直接初始化 传入空对象即可!)。因为页面上可能有多个输入框 所以需要一个父级class 来区分是那个输入框,当然要个隐藏域 存值给开发后台。

其中在配置项里面 有个邮箱数组参数 mailArr : ["@qq.com","@qq2.com","@gmail.com","@126.com","@163.com","@hotmail.com","@yahoo.com","@yahoo.com.cn","@live.com","@sohu.com","@sina.com"] 。就是要告诉我们默认邮箱有这么多,不管我输入什么 下拉框初始化时候有这么多邮箱提示,当我精确到某一项的时候 在给个提示 精确到某一项下拉。当然由于需求的变更 邮箱这个参数可以自己初始化时候 自己根据需求配置。

实现的功能如下:

1. 支持键盘上下移键盘操作,支持鼠标点击及按回车操作。

2. 点击document时候 除当前input输入框之外 下拉框隐藏。当接着输入时候 实现自动匹配等等操作。

具体不多说 就是类似于网上注册时候 邮箱自动提示功能一样 ,如果有任何bug的话 可以给我留言,就不罗嗦了!

CSS代码如下:

<style>

*{margin:0;padding:0;}

ul,li{list-style:none;}

.inputElem {width:198px;height:22px;line-height:22px;border:1px solid #ff4455;}

.parentCls{width:200px;}

.auto-tip li{width:100%;height:22px;line-height:22px;font-size:14px;}

.auto-tip li.hoverBg{background:#ddd;cursor:pointer;}

.red{color:red;}

.hidden {display:none;}

</style>

emailAutoComplete.js代码点击此处本站下载。

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jquery监控数据是否变化(修正版)
Apr 12 Javascript
js 控制下拉菜单刷新的方法
Mar 03 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
Feb 22 Javascript
使表格的标题列可左右拉伸jquery插件封装
Nov 24 Javascript
浅谈jquery中delegate()与live()
Jun 22 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
Aug 08 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
Dec 27 Javascript
详解javascript中的babel到底是什么
Jun 21 Javascript
在vue项目中正确使用iconfont的方法
Sep 28 Javascript
js+html实现周岁年龄计算器
Jun 25 Javascript
Vue-cli3项目引入Typescript的实现方法
Oct 18 Javascript
Vue 请求传公共参数的操作
Jul 31 Javascript
js判断鼠标左、中、右键哪个被点击的方法
Jan 27 #Javascript
js判断是否按下了Shift键的方法
Jan 27 #Javascript
js获取json元素数量的方法
Jan 27 #Javascript
javascript修改图片src的方法
Jan 27 #Javascript
js获取内联样式的方法
Jan 27 #Javascript
js获取元素外链样式的方法
Jan 27 #Javascript
jquery复选框多选赋值给文本框的方法
Jan 27 #Javascript
You might like
PHP新手用的Insert和Update语句构造类
2012/03/31 PHP
总结PHP内存释放以及垃圾回收
2018/03/29 PHP
js下用gb2312编码解码实现方法
2009/12/31 Javascript
jquery 的 $(&quot;#id&quot;).html() 无内容的解决方法
2010/06/07 Javascript
Javascript面向对象编程
2012/03/18 Javascript
调整小数的格式保留小数点后两位
2014/05/14 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
Bootstrap3 多选和单选框(checkbox)
2016/12/29 Javascript
微信小程序微信支付接入开发实例详解
2017/04/12 Javascript
基于AngularJS的简单使用详解
2017/09/10 Javascript
使用 Node.js 开发资讯爬虫流程
2018/01/07 Javascript
vue 组件高级用法实例详解
2018/04/11 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
2018/12/03 Javascript
React降级配置及Ant Design配置详解
2018/12/27 Javascript
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
[01:04:06]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第一局
2016/02/26 DOTA
python实现支持目录FTP上传下载文件的方法
2015/06/03 Python
详解Django缓存处理中Vary头部的使用
2015/07/24 Python
python+pyqt实现右下角弹出框
2017/10/26 Python
python批量替换文件名中的共同字符实例
2020/03/05 Python
Django多数据库配置及逆向生成model教程
2020/03/28 Python
将pymysql获取到的数据类型是tuple转化为pandas方式
2020/05/15 Python
PyQt5 QDockWidget控件应用详解
2020/08/12 Python
python类共享变量操作
2020/09/03 Python
Python在后台自动解压各种压缩文件的实现方法
2020/11/10 Python
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
关于是否需要写商业计划书
2014/02/07 职场文书
个人委托书怎么写
2014/04/04 职场文书
《观舞记》教学反思
2014/04/16 职场文书
年终考核实施方案
2014/05/26 职场文书
2014年档案管理工作总结
2014/11/17 职场文书
2014年节能工作总结
2014/12/18 职场文书
个人委托书范文
2015/01/28 职场文书
2015年园林绿化工作总结
2015/05/23 职场文书
清明节主题班会
2015/08/14 职场文书
Django显示可视化图表的实践
2021/05/10 Python