[模仿微软Live.cn]JavaScript输入邮箱自动提示
原理是：在一个输入框 中，当我输入任何字的时候 自动下拉相应的邮箱提示，在输入框输入123的时候 下拉框有所有123的邮箱 输入其他的时候 有其他文案对应的邮箱。
同理 此插件不需要任何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","@live.com","@sohu.com","@sina.com","@keleyi.com"] 。就是要告诉我们默认邮箱有这么多，不管我输入什么 下拉框初始化时候有这么多邮箱提示，当我精确到某一项的时候 在给个提示 精确到某一项下拉。当然由于需求的变更 邮箱这个参数可以自己初始化时候 自己根据需求配置。
实现的功能如下：
1. 支持键盘上下移键盘操作，支持鼠标点击及按回车操作。
2. 点击document时候 除当前input输入框之外 下拉框隐藏。当接着输入时候 实现自动匹配等等操作。
以下是代码，保存到html文件打开：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>JS输入框邮箱自动提示-柯乐义</title>
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/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="http://keleyi.com/keleyi/phtml/jstexiao/7/emailAutoComplete.js"></script>
</head>
<body>
<div style="width:736px;margin:10px auto;">
<div><h2>JS输入框邮箱自动提示·柯乐义</h2><a href="http://keleyi.com/a/bjac/xvcdrv0w.htm" target="_blank">原文</a></div>
请在下方输入邮箱用户名：
<div class="parentCls">
<input type="text" class="inputElem">
</div>
</div>
</body>
</html>
CSS
*{margin:;padding:;}
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;}
[模仿微软Live.cn]JavaScript输入邮箱自动提示的更多相关文章
- JS输入框邮箱自动提示(带有demo和源码)（转载）
今天在javascriptQQ群里面 有童鞋问到 有没有 "JS输入框邮箱自动提示"插件,即说都找遍了github上源码 都没有看到这样类似的插件,然后我想了下 "JS输 ...
- JS输入框邮箱自动提示(带有demo和源码)
今天在javascriptQQ群里面 有童鞋问到 有没有 "JS输入框邮箱自动提示"插件,即说都找遍了github上源码 都没有看到这样类似的插件,然后我想了下 "JS输 ...
- JavaScript实现邮箱后缀提示功能
先来个基础的 需求 根据下面需求实现如示意图所示的邮箱输入提示功能,注意,根据要求只需实现下面功能 当用户没有任何输入时,提示框消失 当用户输入字符后,显示提示框,并且把用户输入的内容自动拼上邮箱后缀 ...
- eclipse输入时自动提示
当输入一部分代码时,其他的候选代码提示出来,可以提高开发的效率,设置方法如下: 选择Window -> Perferences -> Java -> Editor -> Con ...
- eclipse中输入@符号自动提示Annotation
将Eclipse中Content Assist中的Auto activation for java里.的后面加上@符号即可
- jquery 实现邮箱输入自动提示功能
邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作为账号名 为了提高用户的体验,很多网站都会实现邮箱输入的自动提示功能,所有自己也实现了一个,先看下效果吧,觉得效果还行的就拿去 ...
- jquery 实现邮箱输入自动提示功能：（二）
上篇文章写到了一个不错的jquery实现邮箱输入自动提示功能,发现还有一个不错的自动提示插件: 先展示结果如图: html代码: <center> <h1>输入邮箱试试!< ...
- jquery 实现邮箱输入自动提示功能：（一）
记得去年做某个项目的时候,用到了邮箱输入自动提示功能,于是网上搜了一下,发现了这个写得不错,现在回想起来,转载一下,方便查阅. 邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作 ...
- 邮箱自动完成（jquary效果）
邮箱自动完成的效果在网站上大多都看过,但是质量参差不齐,今天突然在网上看到一篇博客,感觉这个插件很好,就想来写一下分享给大家! 效果图如下! 完整demo代码如下: <!DOCTYPE html ...
随机推荐
- 四、redis系列之主从复制与哨兵机制
1. 绪言 在现实应用环境中,出于数据容量.容灾.性能等因素的考虑,往往不会只使用一台服务器,而是使用集群的方式.Redis 中也有类似的维持一主多从的方式提高 Redis 集群的高可用性的方案,而其 ...
- NetCore+Dapper WebApi架构搭建（二）：底层封装
看下我们上一节搭建的架构,现在开始从事底层的封装 1.首先需要一个实体的接口IEntity namespace Dinner.Dapper { public interface IEntity< ...
- python学习笔记 - for循环: 遍历字典, 分别打印key, value, key:value
#遍历字典, 分别打印key, value, key:value emp = {'name':'Tom', 'age':20, 'salary' : 8800.00} for k in emp.key ...
- 机器学习之路: python 决策树分类DecisionTreeClassifier 预测泰坦尼克号乘客是否幸存
使用python3 学习了决策树分类器的api 涉及到 特征的提取,数据类型保留,分类类型抽取出来新的类型 需要网上下载数据集,我把他们下载到了本地, 可以到我的git下载代码和数据集: https: ...
- ARM 寄存器
ARM总共有37个寄存器 ARM寄存器物理分类 通用寄存器:1:不分组寄存器(R0--R7) 2:分组寄存器(R8-R14) 3:程序计数器(R15)(注意:又名pc指针) 程序状态寄存器:1:CPS ...
- [51Nod 1773] A国的贸易
[51Nod 1773] A国的贸易 题目描述 A国是一个神奇的国家. 这个国家有 2n 个城市,每个城市都有一个独一无二的编号 ,编号范围为0~2n-1. A国的神奇体现在,他们有着神奇的贸易规则. ...
- nginx安装第三方模块
原已经安装好的nginx,现在需要添加一个未被编译安装的模块 举例说明:安装第三方的ngx_cache_purge模块(用于清除指定URL的缓存) nginx的模块是需要重新编译nginx,而不是像a ...
- 20162327WJH实验四——图的实现与应用
20162327WJH实验四--图的实现与应用 实 验 报 告 课程:程序设计与数据结构 班级: 1623 姓名: 王旌含 学号:20162327 成绩: 指导教师:娄嘉鹏 王志强 实验日期:11月2 ...
- C++11中的raw string literals
作为一名C++书看得少得可怜的新手,我一直没有勇气去系统地学习一下C++ 11添加的新特性.不过,平日里逛论坛,阅读大犇们的博客,倒是了解了一些.比如,这个帖子: 如何绕过g++ 4.8.1那个不能在 ...
- [COGS2580]偏序 II
[COGS2580]偏序 II 题目大意: \(n(n\le50000)\)个五元组,求五维偏序. 思路: CDQ分治套CDQ分治套CDQ分治套树状数组. 时间复杂度\(\mathcal O(n\lo ...