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 相关文章推荐
JavaScript与Image加载事件(onload)、加载状态(complete)
Feb 14 Javascript
jQuery中Ajax的get、post等方法详解
Jan 20 Javascript
jQuery中hover方法和toggle方法使用指南
Feb 27 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
Sep 16 Javascript
jQuery实现放大镜效果实例代码
Mar 17 Javascript
JS判断字符串变量是否含有某个字串的实现方法
Jun 03 Javascript
JS实现图片剪裁并预览效果
Aug 12 Javascript
Javascript Event(事件)的传播与冒泡
Jan 23 Javascript
Angular使用操作事件指令ng-click传多个参数示例
Mar 27 Javascript
Vuex 快速入门(简单易懂)
Sep 20 Javascript
Vue实现兄弟组件间的联动效果
Jan 21 Javascript
原生js+ajax分页组件
Jan 30 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提示Cannot modify header information - headers already sent by解决方法
2014/09/22 PHP
PHP 读取大文件并显示的简单实例(推荐)
2016/08/12 PHP
php基于 swoole 实现的异步处理任务功能示例
2019/08/13 PHP
javascript循环变量注册dom事件 之强大的闭包
2010/09/08 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
2013/08/12 Javascript
Jquery如何实现点击时高亮显示代码
2014/01/22 Javascript
javascript实现文本域写入字符时限定字数
2014/02/12 Javascript
node.js中的fs.rename方法使用说明
2014/12/16 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
原生JS简单实现ajax的方法示例
2016/11/29 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
2017/08/04 Javascript
vue2里面ref的具体使用方法
2017/10/27 Javascript
p5.js入门教程之键盘交互
2018/03/19 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
vue实现的请求服务器端API接口示例
2019/05/25 Javascript
新手入门js闭包学习过程解析
2019/10/08 Javascript
ElementUI 修改默认样式的几种办法(小结)
2020/07/29 Javascript
vue实现lodop打印功能的示例
2020/11/11 Javascript
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
python中assert用法实例分析
2015/04/30 Python
Python中常见的数据类型小结
2015/08/29 Python
python调试神器PySnooper的使用
2019/07/03 Python
python进程间通信Queue工作过程详解
2019/11/01 Python
Python random模块制作简易的四位数验证码
2020/02/01 Python
Python中import导入不同目录的模块方法详解
2020/02/18 Python
Python编写万花尺图案实例
2021/01/03 Python
伯克斯奥特莱斯:Burkes Outlet
2019/03/30 全球购物
办理暂住证介绍信
2014/01/11 职场文书
档案接收函
2014/01/13 职场文书
搞笑爱情保证书
2014/04/29 职场文书
2015年班级元旦晚会活动总结
2014/11/28 职场文书
学校教师师德师风承诺书
2015/04/28 职场文书
结婚仪式主持词
2015/06/29 职场文书
Python实现Telnet自动连接检测密码的示例
2021/04/16 Python
sql通过日期判断年龄函数的示例代码
2021/07/16 SQL Server
clear 万能清除浮动(clearfix:after)
2023/05/21 HTML / CSS