基于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 相关文章推荐
JavaScript拆分字符串时产生空字符的解决方案
Sep 26 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
May 18 Javascript
Jquery on方法绑定事件后执行多次的解决方法
Jun 02 Javascript
详解JavaScript RegExp对象
Feb 04 Javascript
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
React-Native中禁用Navigator手势返回的示例代码
Sep 09 Javascript
React 使用browserHistory项目访问404问题解决
Jun 01 Javascript
jQuery使用each遍历循环的方法
Sep 19 jQuery
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
Sep 25 Javascript
在React项目中使用Eslint代码检查工具及常见问题
Oct 10 Javascript
微信小程序实现星级评价效果
Dec 28 Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 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类继承 extends使用介绍
2014/01/14 PHP
改写ThinkPHP的U方法使其路由下分页正常
2014/07/02 PHP
thinkphp获取栏目和文章当前位置的方法
2014/10/29 PHP
人脸识别测颜值、测脸龄、测相似度微信接口
2016/04/07 PHP
微信公众号实现会员卡领取功能
2017/06/08 PHP
php连接mysql之mysql_connect()与mysqli_connect()的区别
2020/07/19 PHP
提示$ is not defined错误分析及解决
2013/04/09 Javascript
jquery ajax 如何向jsp提交表单数据
2015/08/23 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
2015/11/24 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
2016/09/17 Javascript
Angular.js中用ng-repeat-start实现自定义显示
2016/10/18 Javascript
WebSocket实现简单客服聊天系统
2017/05/12 Javascript
vue通过watch对input做字数限定的方法
2017/07/13 Javascript
通过命令行创建vue项目的方法
2017/07/20 Javascript
Vue项目组件化工程开发实践方案
2018/01/09 Javascript
详解swipe使用及竖屏页面滚动方法
2018/06/28 Javascript
layui form.render('select', 'test2') 更新渲染的方法
2019/09/27 Javascript
详解小程序云开发攻略(解决最棘手的问题)
2019/09/30 Javascript
Go语言基于Socket编写服务器端与客户端通信的实例
2016/02/19 Python
基于Python的XSS测试工具XSStrike使用方法
2017/07/29 Python
pymongo中group by的操作方法教程
2019/03/22 Python
Python使用get_text()方法从大段html中提取文本的实例
2019/08/27 Python
python+Django实现防止SQL注入的办法
2019/10/31 Python
解决安装pyqt5之后无法打开spyder的问题
2019/12/13 Python
python使用ctypes调用扩展模块的实例方法
2020/01/28 Python
windows下Pycharm安装opencv的多种方法
2020/03/05 Python
使用pyecharts1.7进行简单的可视化大全
2020/05/17 Python
加拿大国民体育购物网站:National Sports
2018/11/04 全球购物
科颜氏英国官网:Kiehl’s英国
2019/11/20 全球购物
C语言笔试题
2014/09/04 面试题
大学毕业生通用求职信
2013/09/28 职场文书
烹饪自我鉴定
2014/03/01 职场文书
中国入世承诺
2014/04/01 职场文书
2014政府领导班子对照检查材料思想汇报(3篇)
2014/09/26 职场文书
党员干部学法用法心得体会
2016/01/21 职场文书
详解JAVA中的OPTIONAL
2021/06/14 Java/Android