原理是：在一个输入框 中，当我输入任何字的时候 自动下拉相应的邮箱提示，在输入框输入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输入邮箱自动提示的更多相关文章

  1. JS输入框邮箱自动提示(带有demo和源码)（转载）

    今天在javascriptQQ群里面 有童鞋问到 有没有 "JS输入框邮箱自动提示"插件,即说都找遍了github上源码 都没有看到这样类似的插件,然后我想了下 "JS输 ...

  2. JS输入框邮箱自动提示(带有demo和源码)

    今天在javascriptQQ群里面 有童鞋问到 有没有 "JS输入框邮箱自动提示"插件,即说都找遍了github上源码 都没有看到这样类似的插件,然后我想了下 "JS输 ...

  3. JavaScript实现邮箱后缀提示功能

    先来个基础的 需求 根据下面需求实现如示意图所示的邮箱输入提示功能,注意,根据要求只需实现下面功能 当用户没有任何输入时,提示框消失 当用户输入字符后,显示提示框,并且把用户输入的内容自动拼上邮箱后缀 ...

  4. eclipse输入时自动提示

    当输入一部分代码时,其他的候选代码提示出来,可以提高开发的效率,设置方法如下: 选择Window -> Perferences -> Java -> Editor -> Con ...

  5. eclipse中输入@符号自动提示Annotation

    将Eclipse中Content Assist中的Auto activation for java里.的后面加上@符号即可

  6. jquery 实现邮箱输入自动提示功能

    邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作为账号名 为了提高用户的体验,很多网站都会实现邮箱输入的自动提示功能,所有自己也实现了一个,先看下效果吧,觉得效果还行的就拿去 ...

  7. jquery 实现邮箱输入自动提示功能：（二）

    上篇文章写到了一个不错的jquery实现邮箱输入自动提示功能,发现还有一个不错的自动提示插件: 先展示结果如图: html代码: <center> <h1>输入邮箱试试!< ...

  8. jquery 实现邮箱输入自动提示功能：（一）

    记得去年做某个项目的时候,用到了邮箱输入自动提示功能,于是网上搜了一下,发现了这个写得不错,现在回想起来,转载一下,方便查阅. 邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作 ...

  9. 邮箱自动完成（jquary效果）

    邮箱自动完成的效果在网站上大多都看过,但是质量参差不齐,今天突然在网上看到一篇博客,感觉这个插件很好,就想来写一下分享给大家! 效果图如下! 完整demo代码如下: <!DOCTYPE html ...

随机推荐

  1. React Native网络编程之Fetch

    目录 1.前言 2.什么是Fetch 3.最简单的应用 4.支持的请求参数 - 4.1. 参数详讲 - 4.2. 示例 5.请求错误与异常处理   1. 前言   网络请求是开发APP中不可或缺的一部 ...

  2. Android与GPL、BSD和Apache之间的关系

    参考资料 Android ,在争议中逃离 Linux 内核的 GPL 约束 | 爱范儿 简介 众所周知,Linux内核基于GPL v2发行.GPL规定,基于GPL的软件产品的衍生产品,也必须使用GPL ...

  3. OpenGL 笔记<3> 数据传递 一

    Sending data to a shader using vertex attributes and vertex buffer object 上次我们说到着色器的编译和连接,后面的事情没有做过多 ...

  4. 【基础知识】.Net基础加强 第四天

    一. 显示实现接口 1. 显示实现接口的目的:为了解决法方法重名的问题. 2. 显示实现接口必须是私有的,不能用public 3. (复习)类中成员不写访问修饰符默认是private:类如果不写访问修 ...

  5. Java内存是怎么管理的

    JAVA 内存管理总结 1. java是如何管理内存的 Java的内存管理就是对象的分配和释放问题.(两部分) 分配 :内存的分配是由程序完成的,程序员需要通过关键字new 为每个对象申请内存空间 ( ...

  6. luoguP4360 [CEOI2004]锯木厂选址

    题目链接 luoguP4360 [CEOI2004]锯木厂选址 题解 dis:后缀和 sum:前缀和 补集转化,减去少走的,得到转移方程 dp[i] = min(tot - sumj * disj - ...

  7. 【Dijkstra】POJ1062-昂贵的聘礼

    由于物品编号从1开始,我们假定0也是一个物品作为起点,它到其它物品的距离就是各个物品的原始价值.开始时,如果两种物品主人的等级限制M在规定范围以内,且j能用i替换,则将优惠价格视作从i到j的一条权值为 ...

  8. bzoj 3283 扩展BSGS + 快速阶乘

    T2  扩展BSGS T3 快速阶乘 给定整数n,质数p和正整数c,求整数s和b,满足n! / pb = s mod pc 考虑每次取出floor(n/p)个p因子,然后将问题转化为子问题. /*** ...

  9. Codeforces Round #359 (Div. 2) A. Free Ice Cream 水题

    A. Free Ice Cream 题目连接: http://www.codeforces.com/contest/686/problem/A Description After their adve ...

  10. Ubntu 14.04 下 开源骨架跟踪-skeltrack

    Skeltrack是个不错的开源骨架跟踪软件.跟踪起来还相对的稳定速度还不错.能满足基本的体感功能.下面来介绍下怎么安装.  1.运行环境配置 #need clutter 1.8 or greater ...