基于jQuery的input输入框下拉提示层(自动邮箱后缀名)


Posted in Javascript onJune 14, 2012

效果图

基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
代码部分

// JavaScript Document 
(function($){ 
$.fn.extend({ 
"changeTips":function(value){ 
value = $.extend({ 
divTip:"" 
},value) 
var $this = $(this); 
var indexLi = 0; 
//点击document隐藏下拉层 
$(document).click(function(event){ 
if($(event.target).attr("class") == value.divTip || $(event.target).is("li")){ 
var liVal = $(event.target).text(); 
$this.val(liVal); 
blus(); 
}else{ 
blus(); 
} 
}) 
//隐藏下拉层 
function blus(){ 
$(value.divTip).hide(); 
} 
//键盘上下执行的函数 
function keychang(up){ 
if(up == "up"){ 
if(indexLi == 1){ 
indexLi = $(value.divTip).children().length-1; 
}else{ 
indexLi--; 
} 
}else{ 
if(indexLi == $(value.divTip).children().length-1){ 
indexLi = 1; 
}else{ 
indexLi++; 
} 
} 
$(value.divTip).children().eq(indexLi).addClass("active").siblings().removeClass(); 
} 
//值发生改变时 
function valChange(){ 
var tex = $this.val();//输入框的值 
var fronts = "";//存放含有“@”之前的字符串 
var af = /@/; 
var regMail = new RegExp(tex.substring(tex.indexOf("@")));//有“@”之后的字符串,注意正则字面量方法,是不能用变量的。所以这里用的是new方式。 
//让提示层显示,并对里面的LI遍历 
if($this.val()==""){ 
blus(); 
}else{ 
$(value.divTip). 
show(). 
children(). 
each(function(index) { 
var valAttr = $(this).attr("email"); 
if(index==1){$(this).text(tex).addClass("active").siblings().removeClass();} 
//索引值大于1的LI元素进处处理 
if(index>1){ 
//当输入的值有“@”的时候 
if(af.test(tex)){ 
//如果含有“@”就截取输入框这个符号之前的字符串 
fronts = tex.substring(tex.indexOf("@"),0); 
$(this).text(fronts+valAttr); 
//判断输入的值“@”之后的值,是否含有和LI的email属性 
if(regMail.test($(this).attr("email"))){ 
$(this).show(); 
}else{ 
if(index>1){ 
$(this).hide(); 
} 
} 
} 
//当输入的值没有“@”的时候 
else{ 
$(this).text(tex+valAttr); 
} 
} 
}) 
} 
} 
//输入框值发生改变的时候执行函数,这里的事件用判断处理浏览器兼容性; 
if($.browser.msie){ 
$(this).bind("propertychange",function(){ 
valChange(); 
}) 
}else{ 
$(this).bind("input",function(){ 
valChange(); 
}) 
} 
//鼠标点击和悬停LI 
$(value.divTip).children(). 
hover(function(){ 
indexLi = $(this).index();//获取当前鼠标悬停时的LI索引值; 
if($(this).index()!=0){ 
$(this).addClass("active").siblings().removeClass(); 
} 
}) 
//按键盘的上下移动LI的背景色 
$this.keydown(function(event){ 
if(event.which == 38){//向上 
keychang("up") 
}else if(event.which == 40){//向下 
keychang() 
}else if(event.which == 13){ //回车 
var liVal = $(value.divTip).children().eq(indexLi).text(); 
$this.val(liVal); 
blus(); 
} 
}) 
} 
}) 
})(jQuery)

一、功能分析:

1.input输入框的值,发生变化时,显示提示的下拉层;

2.input输入框的值,发生变化时,显示提示的下拉层,会根据输入的内容自动往“@”前面添加;

3.input输入框的值,发生变化时,显示提示的下拉层,会根据输入的内容对下拉层“@”后面的内容进行筛选;

4.点击下拉层里面的提示内容,会将其值,填充到输入框;

5.按下鼠标回车键会将其选中的下拉层里的内容,填充到输入框;

6.按键盘的“向上”或“向下”的方向键,可以在下拉层的选项中移动(循环移动,改变当前LI的背景色);

7.鼠标悬停在下拉层的LI上面时,会有一个背景色。
二、功能实现:

1.input输入框的值,发生变化时的事件是:propertychange(IE)或input(标准);

2.在发生propertychange事件的时候,取其输入框的值,再取其“@”前面的值,并赋值给下拉层里面的LI加上LI的email属性值;

3.在发生propertychange事件的时候,

3.1取其输入框的值,再取其“@”后面的值,

3.2并将这个值与下拉层里面的LI的email属性值进行正则匹配;

  这里要注意,正则字面量方法,是不能用变量的。所以这里用的是new方式。

这里的正则是取的输入框“@”后面的值,所以正则,是变化的。而LI的EMAIL属性值是不变的

4.这里用了一个事件委托方式,将点击事件绑定给document,然后通过判断,点击时最初触发的DOM元素,是什么。来决定,

4.1否隐藏下拉提示层?

4.2还是需要将下拉层,选中的值,赋给输入框

(这里不能直接使用,当输入框失去焦点时,隐藏下拉提示层,因为会与点击下拉层,将其值填入输入框,这个功能有逻辑上的矛盾;)

5.和上面第4条差不多;

6.就是要注意,在鼠标悬停时,把当前的LI索引存入一个全局变量当中,这样就可以告诉“向上”或“向下”按键时,的起始位置了;

7.遍历LI,给它们的悬停事件都绑定一个改变其当前背景色的处理函数;
感谢“妙味课堂”提供的视频
在线演示 http://demo.3water.com/js/2012/myinputMail/
打包下载 myinputMail_3water.rar

Javascript 相关文章推荐
js资料prototype 属性
Mar 13 Javascript
JavaScript中的事件处理
Jan 16 Javascript
利用jquery包将字符串生成二维码图片
Sep 12 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
Aug 15 Javascript
JavaScript的设计模式经典之建造者模式
Feb 24 Javascript
JS简单实现自定义右键菜单实例
May 31 Javascript
详解Angular CLI + Electron 开发环境搭建
Jul 20 Javascript
使用Node.js实现ORM的一种思路详解(图文)
Oct 24 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
Jan 12 Javascript
vue.js将时间戳转化为日期格式的实现代码
Jun 05 Javascript
小程序实现展开/收起的效果示例
Sep 22 Javascript
vue组件开发之tab切换组件使用详解
Aug 21 Javascript
jquery 之 $().hover(func1, funct2)使用方法
Jun 14 #Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
Jun 11 #Javascript
javascript倒计时功能实现代码
Jun 07 #Javascript
基于jQuery的计算文本框字数的代码
Jun 06 #Javascript
Javascript 页面模板化很多人没有使用过的方法
Jun 05 #Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
Jun 04 #Javascript
Javascript数组的排序 sort()方法和reverse()方法
Jun 04 #Javascript
You might like
使用PHP模拟HTTP认证
2006/10/09 PHP
php中存储用户ID和密码到mysql数据库的方法
2013/02/06 PHP
Destoon实现多表查询示例
2014/08/21 PHP
linux中cd命令使用详解
2015/01/08 PHP
php查询操作实现投票功能
2016/05/09 PHP
网页中CDATA标记的说明
2010/09/12 Javascript
javascript字符串拼接的效率问题
2010/12/25 Javascript
如何实现textarea里的不同文本显示不同颜色
2014/01/20 Javascript
JavaScript改变CSS样式的方法汇总
2015/05/07 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
Javascript 一些需要注意的细节(必看篇)
2017/07/08 Javascript
使用FileReader API创建Vue文件阅读器组件
2018/04/03 Javascript
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
2019/07/18 Javascript
微信小程序 WXML节点信息查询详解
2019/07/29 Javascript
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
Javascript ParentNode和ChildNode接口原理解析
2020/03/16 Javascript
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
初步认识Python中的列表与位运算符
2015/10/12 Python
使用python将图片格式转换为ico格式的示例
2018/10/22 Python
python绘制雪景图
2019/12/16 Python
用python实现名片管理系统
2020/06/18 Python
Python Selenium实现无可视化界面过程解析
2020/08/25 Python
美国顶尖折扣时尚购物网:Bluefly
2016/08/28 全球购物
Hunter Boots美国官方网站:赫特威灵顿雨靴
2018/06/16 全球购物
路政管理专业推荐信
2013/11/11 职场文书
厨房工作人员岗位职责
2013/11/15 职场文书
银行财务部实习生的自我鉴定
2013/11/27 职场文书
高中化学教学反思
2014/01/13 职场文书
服务理念口号
2014/06/11 职场文书
村创先争优活动总结
2014/08/28 职场文书
房屋产权共有协议书范本
2014/11/03 职场文书
个园导游词
2015/02/04 职场文书
施工安全责任协议书
2016/03/23 职场文书
环境保护宣传标语大全!
2019/06/28 职场文书
Python 匹配文本并在其上一行追加文本
2022/05/11 Python