html邮箱下拉栏,jQuery实现邮箱下拉列表自动补全功能
记得,在上个项目中,遇到这样一个需求,网站要求填写邮箱的时候,还没有填写完,就会出现一系列下拉列表,帮助自动补全邮箱的功能。今天小编给给大家分享下我基于jquery是怎么实现此功能的!
功能简述
•填写邮箱名字,出现下拉列表,自动补全邮箱
•点击上下按键,选取下拉列表邮箱
•按回车键,选中列表内容,隐藏下拉列表
•鼠标经过,下拉列表选项设置为高亮
•鼠标点击,选中下拉列表选项,隐藏下拉列表
HTML
HTML代码很简单,我们就一个简单的输入框,然后一个ul标签,在内部可以放好多li标签。
以上便是HTML代码
CSS
在CSS中,定义也比较简单,其中有一个 lilight 的 class,可以使背景变色,通过 remove 和 add 这个 class,我们可以轻松地实现下拉列表元素是否选中的区分。
CSS所有样式如下
.content input{
padding:5px 10px;
width:200px;
}
ul.list{
list-style:none;
padding:0px;
margin:0px;
overflow:hidden;
}
ul.list li{
border:1px solid #EEE;
width:180px;
padding:5px 10px;
margin:0px;
text-overflow:ellipsis; //溢出时变为省略
overflow:hidden;
}
.lilight{
background-color:#fafafa;
}
JS
我们引入 jQuery 来实现对元素的操作,实现了按键和鼠标监听,代码如下
$(function(){
//声明所有的电子邮件变量
var mail=new Array("sina.com.cn","126.com","163.com","gmail.com","qq.com","vip.qq.com","hotmail.com","sohu.com","139.com","vip.sina.com","cuiqingcai.com");
//生成一个个li,并加入到ul中
for(var i=0;i
var liElement=$("
@"+mail[i]+"");
liElement.appendTo("ul.list");
}
//首先让list隐藏起来
$("ul.list").hide();
$("#email").keyup(function(event){
//键入的内容不是上下箭头和回车
if(event.keyCode!=38&&event.keyCode!=40&&event.keyCode!=13){
//如果输入的值不是空或者不以空格开头
if($.trim($(this).val())!=""&& $.trim($(this).val()).match(/^@/)==null){
$("ul.list").show();
//如果当前有已经高亮的下拉选项卡,那么将其移除
if($("ul.list li:visible").hasClass("lilight")){
$("ul.list li").removeClass("lilight");
}
//如果还存在下拉选项卡,那么将其高亮
if($("ul.list li:visible")){
$("ul.list li:visible:eq(0)").addClass("lilight");
}
}else{
//否则不进行显示
$("ul.list").hide();
$("ul.list li").removeClass("lilight");
}
//输入的内容还没有包括@符号
if($.trim($(this).val()).match(/.*@/)==null){
$(".list li .ex").text($(this).val());
}else{
//输入的符号已经包含了@
var str = $(this).val();
var strs = str.split("@");
$(".list li .ex").text(strs[0]);
if($(this).val().length>=strs[0].length+1){
tail=str.substr(strs[0].length+1);
$(".list li .tail").each(function(){
//如果数组中的元素是以文本中的后缀开头,那么就显示,否则不显示
if(!($(this).text().match(tail)!=null&&$(this).text().indexOf(tail)==0)){
//隐藏其他的li
$(this).parent().hide();
}else{
//显示所在的li
$(this).parent().show();
}
});
}
}
}
//按了回车时,将当前选中的元素写入到文本框中
if(event.keyCode==13){
$("#email").val($("ul.list li.lilight:visible").text());
$("ul.list").hide();
}
});
//监听上下方向键
$("#email").keydown(function(event){
//下方向键按下了
if(event.keyCode==40){
if($("ul.list li").is(".lilight")){
if($("ul.list li.lilight").nextAll().is("li:visible")){
$("ul.list li.lilight").removeClass("lilight").next("li").addClass("lilight");
}
}
}
//下方向键按下了
if(event.keyCode==38){
if($("ul.list li").is(".lilight")){
if($("ul.list li.lilight").prevAll().is("li:visible")){
$("ul.list li.lilight").removeClass("lilight").prev("li").addClass("lilight");
}
}
}
});
//当鼠标点击某个下拉项时,选中该项,下拉列表隐藏
$("ul.list li").click(function(){
$("#email").val($(this).text());
$("ul.list").hide();
});
//当鼠标划过某个下拉项时,选中该项,下拉列表隐藏
$("ul.list li").hover(function(){
$("ul.list li").removeClass("lilight");
$(this).addClass("lilight");
});
//当鼠标点击其他位置,下拉列表隐藏
$(document).click(function(){
$("ul.list").hide();
});
});
总结
其实还有一个比较强大的插件,叫autocomplete,同样可以实现下拉列表的自动补全,功能更加完善,如果大家有兴趣可以去试一下。不过感觉最常用的就是邮箱自动补齐,而且直接用 jQuery 就可以比较方便地实现,所以博主就没有使用autocomplete插件,而是自己写了一下,一来练习一下,二来对这种功能的实现了解得更加透彻。
以上所述是小编给大家介绍的jQuery实现邮箱下拉列表自动补全功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
html邮箱下拉栏,jQuery实现邮箱下拉列表自动补全功能相关推荐
- html 输入框自动缩短 一行内显示,JQuery UI组合框自动补全功能改进版(即时全部显示+input内容保存)...
JQuery UI Autocomplete(自动补全)功能在input前端设计中非常有用,最近一个项目正好用到,仔细研究了下组合框(combobox)的自动补全部分,官方地址是:https://jq ...
- JQuery AutoComplete插件实现自动补全
JQuery AutoComplete插件实现自动补全 官网 jquery提供的这个插件确实强大,十几行代码就可以实现自动补全功能,而且还可以选择多种不同的数据源,可以说是非常方便. 此文还查阅了一些 ...
- linux下 为自己编写的程序 添加tab自动补全 功能
linux下 为自己编写的程序 添加tab自动补全功能 入门 complete 在我的tmp下随便写了一个a.sh, 为他补全 edit /etc/bash_completion.d/foo _foo ...
- jQuery搜索框自动补全功能插件实现-autocomplete.js
最近用nodeclub实现股票的输入关键字自动补全股票信息进行搜索功能,原先用jQuery-ui,结果jQuery-ui库太大,所以考虑用其他插件,最终选择使用autocomplete.js,控件简单 ...
- Android实现登录邮箱的自动补全功能
Android SDK 提供了MultiAutoCompleteTextView 控件,可以支持从指定字符开始联想.MultiAutoCompleteTextView 通过分词器 Tokenizer, ...
- 仿新浪微博登录的邮箱地址自动补全功能
首先,来看一下登录新浪微博的效果图: 当你开始输入你的电子邮箱前的帐号时,就会出现常用邮箱的列表,并自动补齐. 实现的时候,首先在页面上放一个输入文本框和一个div.将div隐藏: 电子邮件:< ...
- jquery.autocomplete自动补全功能
1.jquery.autocomplete参考地址 http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ http:// ...
- Ubuntu 下无法Tab键自动补全功能解决办法
在Ubuntu下 使用Tab键报错:cannot create temp file for here-document: no space left on device 解决: rm -rf /var ...
- linux python tab补全_python交互模式下实现tab自动补全功能
建立.pythonstartup文件 $ cat .pythonstartup # cat ~/.pythonstartup # python startup file #!/usr/bin/env ...
最新文章
- 如何部署深度学习模型?
- Android 一个绚丽的loading动效分析与实现!
- Kernel Driver DmaEgine 子系统 (一)
- Android将联系人读取到LISTVIEW中遇到的问题!
- Android --- 微信支付时出现错误:错误的签名,验签失败,return_code=FAIL
- MongoDB 定位 oplog 必须全表扫描吗?
- Android学习之网上商城(上)
- Bootstrap 滚动监听插件Scrollspy 的事件
- python 多and or执行顺序
- 微信公开课讲师黄咪咪:熟读规则,玩转小游戏
- Java API —— ArrayList类 Vector类 LinkList类
- div 中的i标签如何点击事件_前端优化:语义标签进化史
- 归纳整理一些工作学习中发现的不错的网站、博客地址等(转载)
- eclipse与myeclipse恢复已删除的文件和代码
- 微信小程序Axure元件库
- 40个布局排版好看的网页设计作品
- 将扫描文件放至ftp服务器,复印机扫描至FTP详细设置步骤!
- 网络诊断显示服务器有问题,Win7系统网络诊断提示DNS服务器未响应怎么解决
- [x y w h]转化为[ymin xmin ymax xmax]
- ES8218E低功耗24位ADC芯片 可直接接麦克风