基于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控制框架刷新
Aug 01 Javascript
基于jQuery的仿flash的广告轮播
Nov 05 Javascript
代码获取历史上的今天发生的事
Apr 11 Javascript
Jqprint实现页面打印
Jan 06 Javascript
JavaScript中值类型和引用类型的区别
Feb 23 Javascript
干货!教大家如何选择Vue和React
Mar 13 Javascript
Vue中封装input组件的实例详解
Oct 17 Javascript
vue 添加vux的代码讲解
Nov 30 Javascript
angular4 共享服务在多个组件中数据通信的示例
Mar 30 Javascript
Vue如何实现响应式系统
Jul 11 Javascript
微信小程序页面间值传递的两种方法
Nov 26 Javascript
vant picker+popup 自定义三级联动案例
Nov 04 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检索或者复制远程文件的方法
2015/03/13 PHP
php实现购物车产品删除功能(2)
2020/07/23 PHP
php安全配置记录和常见错误梳理(总结)
2017/03/28 PHP
jquery ajax 登录验证实现代码
2009/09/23 Javascript
从jquery的过滤器.filter()方法想到的
2013/09/29 Javascript
js 针对html DOM元素操作等经验累积
2014/03/11 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
理解和运用JavaScript的闭包机制
2015/08/13 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
AngularJS中的缓存使用
2017/01/11 Javascript
微信小程序 PHP后端form表单提交实例详解
2017/01/12 Javascript
javascript 正则表达式去空行方法
2017/01/24 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
2017/07/05 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
2017/08/12 Javascript
ReactJS实现表单的单选多选和反选的示例
2017/10/13 Javascript
vuex操作state对象的实例代码
2018/04/25 Javascript
详解JS实现系统登录页的登录和验证
2019/04/29 Javascript
小程序实现分类页
2019/07/12 Javascript
如何编写一个 Webpack Loader的实现
2020/10/18 Javascript
[03:14]2014DOTA2西雅图国际邀请赛 EG战队巡礼
2014/07/07 DOTA
浅析Python中yield关键词的作用与用法
2016/11/29 Python
Windows下的Jupyter Notebook 安装与自定义启动(图文详解)
2018/02/21 Python
Python使用pickle模块储存对象操作示例
2018/08/15 Python
python print出共轭复数的方法详解
2019/06/25 Python
python机器学习库scikit-learn:SVR的基本应用
2019/06/26 Python
python issubclass 和 isinstance函数
2019/07/25 Python
PIL包中Image模块的convert()函数的具体使用
2020/02/26 Python
纯CSS绘制漂亮的圆形图案效果
2014/05/07 HTML / CSS
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
Bibloo荷兰:女士、男士和儿童的服装、鞋子和配饰
2019/02/25 全球购物
.NET里面什么时候需要调用垃圾回收
2015/06/01 面试题
AJAX的优缺点都有什么
2015/08/18 面试题
建筑装饰学院室内设计专业个人自我评价
2013/12/07 职场文书
八年级音乐教学反思
2014/01/09 职场文书
社保代办委托书怎么写
2014/10/06 职场文书
利用nginx搭建RTMP视频点播、直播、HLS服务器
2022/05/25 Servers