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

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • js获取元素外链样式的方法

    本文实例讲述了js获取元素外链样式的方法.分享给大家供大家参考.具体分析如下: 一般给元素设置行内样式,如<div id="div1" style="width:500px;"></div>.如要获取它的样式,即可document.getElementById("div1").style.width来获取或设置.但是如果样式是在外链link中的或者是页面的非行内样式,就获取不到了. 在标准浏览器中可以通过window.ge

  • js的toUpperCase方法用法实例

    本文实例讲述了js的toUpperCase方法用法.分享给大家供大家参考.具体分析如下: 定义和用法: toUpperCase() 方法用于把字符串转换为大写. 语法: stringObject.toUpperCase() 返回值: 一个新的字符串,在其中 stringObject 的所有小写字符全部被转换为了大写字符. 实例: 在本例中,"Hello world! jb51.net" 将以大写字母来显示: 复制代码 代码如下: <script type="text/j

  • js判断鼠标左、中、右键哪个被点击的方法

    本文实例讲述了js判断鼠标左.中.右键哪个被点击的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>js判断鼠标左.中.右键哪个被点击-柯乐义</title> <script type="text/javascript"> function whichButton(event) { var btnNum = event.button; if (btnNum==2)

  • js获取json元素数量的方法

    本文实例讲述了js获取json元素数量的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <script> var keleyijson={"plug1":"myslider","plug2":"zonemenu","plug3":"javascript"} function JSONLength(obj) { var size = 0, key; for

  • js的toLowerCase方法用法实例

    本文实例讲述了js的toLowerCase方法用法.分享给大家供大家参考.具体分析如下: 定义和用法: toLowerCase() 方法用于把字符串转换为小写. 语法: stringObject.toLowerCase() 返回值: 一个新的字符串,在其中 stringObject 的所有大写字符全部被转换为了小写字符. 实例: 在本例中,"Hello world! Jb51.Net" 将以小写字母来显示: 复制代码 代码如下: <script type="text/j

  • js获取内联样式的方法

    本文实例讲述了js获取内联样式的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,in

  • JavaScript字符串对象toLowerCase方法入门实例（用于把字母转换为小写）

    JavaScript toLowerCase 方法 toLowerCase 方法用于把(英文)字符串转换为小写,并返回转换后的字符串.其语法如下: 复制代码 代码如下: str_object.toLowerCase() toLowerCase 方法实例 复制代码 代码如下: <script language="JavaScript"> var str = "AaBbCc"; alert( str.toLowerCase() ); </script&

  • js判断一个字符串是否包含一个子串的方法

    本文实例讲述了js判断一个字符串是否包含一个子串的方法.分享给大家供大家参考.具体如下: 在我们前端日常开发中,经常会遇到判断一个字符串中是否包含某个子串,这里我们将去探究一些解决此种需求的方法以及正确的使用它们.理想情况下,我们要找的是一个能匹配我们的目的(if x contains y)的方法,并返回true或false. 一.String.prototype.indexOf和String.prototype.lastIndexOf 这两个方法,可能是我们最容易想到的,如果包含子串,则返回大

  • js判断是否按下了Shift键的方法

    本文实例讲述了js判断是否按下了Shift键的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>使用js判断是否按下了Shift键</title> <script type="text/javascript"> function isKeyPressed(event) { if (event.shiftKey==1) { alert("shift被按下了&

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

    本文实例讲述了JS输入用户名自动显示邮箱后缀列表的方法.分享给大家供大家参考.具体如下: 以下是代码,保存到html文件打开: 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>输入用户名自动显示邮箱后缀列表</title> <script type="text/javascript" src=&q

  • Android ListView自动显示隐藏布局的实现方法

    借助View的OnTouchListener接口来监听listView的滑动,通过比较与上次坐标的大小,判断滑动方向,并通过滑动方向来判断是否需显示或者隐藏对应的布局,并且带有动画效果. 1.自动显示隐藏Toolbar 首先给listView增加一个HeaderView,避免第一个Item被Toolbar遮挡. View header=new View(this); header.setLayoutParams(new AbsListView.LayoutParams( AbsListView.

  • js defineSetter -给js的 "class"自动增加一个set的属性(方法)

    写注释不是我的强项,有什么问题请在评论中写出来:D 写一个JS class时,如 function jsclass() {}; jsclass.prototype = { value: "never-online", //属性1 URL: "www.url.net", //属性2 setValue: function (v) { //set方法 this.value = v; }, setURL: function (v) { //set方法 if (/^www\.

  • JS+PHP实现用户输入数字后显示最大的值及所在位置

    JS+PHP实现用户输入数字后显示最大的值及所在位置

    本文主要给大家介绍的是关于JS+PHP实现用户输入数字后显示最大的值及所在位置的相关内容,目的:分清JS PHP的区别,拓宽思维,下面来一起看看详细的介绍: 分析 1.利用JS的prompt输入用户想要输入的值. 2.利用HTML表单的text标签将输入的值传递给PHP处理文件 3.PHP进行数值判定,选出最大值和位置. 由浅入深: 1.在JS实现获取数组的最大值. var a=[10,20,40,30]; // var max=0; var max=a[0]; for(var i=0;i<a.

  • asp.net下用js实现鼠标移至小图，自动显示相应大图

    实现根据后台绑定小图片,鼠标移至小图,自动显示相应大图 .Net精简版本 <script language="JavaScript"> function GetShowImg(imgfile) { document.all("ShowImage").src = "/semir/images/"+ imgfile; } </script> //DataList绑定 <asp:datalist id="DlSi

  • jQuery 实现自动填充邮箱功能（带下拉提示）

    jQuery 实现自动填充邮箱功能（带下拉提示）

    在做这个功能时候,我参考的是网易注册(http://reg.163.com/reg/reg.jsp?product=urs)中的邮箱栏目所实现的功能与效果.这个功能的目的是使用户在填写邮箱栏目的过程中,在带有邮箱后缀名的菜单的提示下,可以不需要完整输入自己的注册邮箱,达到方便.快捷.友好的效果.在做这个功能的时候,需要充分站在使用者的角度,看怎样设计能够最符合通常情况下人们的使用习惯,又怎样设计反而会让用户感到不便.先来看看功能实现的演示效果图: 在线演示:http://jsfiddle.net

  • JavaScript实现邮箱后缀提示功能的示例代码

    先来个基础的 需求 根据下面需求实现如示意图所示的邮箱输入提示功能,注意,根据要求只需实现下面功能 当用户没有任何输入时,提示框消失 当用户输入字符后,显示提示框,并且把用户输入的内容自动拼上邮箱后缀进行显示 暂时不用考虑示意图中的红色和蓝色背景色的逻辑 注意用户输入中前后空格需要去除 小优化编码 需求 如果我们输入的是 abc@1,这个时候出现的提示框内容是 abc@1@163.com abc@1@gmail.com abc@1@126.com -- 很明显,上面的提示框不是一个符合用户需求的

  • jQuery插件实现可输入和自动匹配的下拉框

    实现可输入+带自动匹配功能的下拉框,我试过以下几种方法: 1.直接使用h5的新标签<datalist>,对应demo如下: <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option val

  • php+ajax 实现输入读取数据库显示匹配信息

    php+ajax 实现输入读取数据库显示匹配信息

    废话不多说了,直接跟大家贴代码了 dropbox_index.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

  • JS中的算法与数据结构之列表(List)实例详解

    本文实例讲述了JS中的算法与数据结构之列表(List).分享给大家供大家参考,具体如下: 前言 前端很少有机会接触到算法,大多都交互性的操作,所以不少前端工程师会抱着这么一种想法:我是做前端的,为什么要学数据结构与算法?没有数据结构与算法,我一样很好的完成工作.实际上,算法是一个宽泛的概念,我们平时写的任何代码都可以成为算法,它是对一个问题的解决方案的准确而完整的描述,是解决一系列问题的清晰指令,它代表着用系统的方法描述解决问题的策略机制.随着现在互联网的飞速发展,前端工程师已不是靠几个选择器操

随机推荐