[模仿微软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: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;}   

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。