基于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.jb51.net/js/2012/myinputMail/
打包下载 myinputMail_jb51.rar

基于jQuery的input输入框下拉提示层(自动邮箱后缀名)的更多相关文章

  1. jQuery 实现带下拉提示且自动填充的邮箱

    /* ** 本文例子所引用的jQuery版本为 jQuery-1.8.3.min.js ** Author:博客园小dee*/ 本文用 jQuery 实现一个用户输入字符时出现能够提示邮箱后缀名的下拉 ...

  2. Dropdown.js基于jQuery开发的轻量级下拉框插件

    Dropdown.js 前言 在SPA(Single Page Application)盛行的时代,jQuery插件的轮子正在减少,由于我厂有需求而开发了这个插件.如果觉得本文对您有帮助,请给个赞,以 ...

  3. 基于jquery封装的颜色下拉选择框

    应同事要求,花了半个小时,写了一个简单的选择颜色的下拉框控件,可以控制输入框指示结果颜色 也贴出来,说不定哪天有用 if (typeof jQuery === 'undefined') { throw ...

  4. 一款基于jQuery的联动Select下拉框

    今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...

  5. input autocomplete 下拉提示+支持中文

    js 代码: $.getJSON("/Foreign/Getforeign_routeEndPoint", function (data) {            $(" ...

  6. 基于jquery和bootstrap的下拉框左右选择功能

    实现如图选择的功能,可以用基于bootstrap的样式,结合jquery事件: <div class="row"> <div class="col-xs ...

  7. jquery选中将select下拉框中一项后赋值给text文本框

    jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...

  8. jQuery cxSelect 多级联动下拉菜单

    随着电商热门,这种多层次的互动更充分地体现在下拉菜单,最明显的是多级联动地址下拉选择,因此,这里是一个简单的分享 jQuery cxSelect 多级联动下拉菜单 cxSelect 它是基于 jQue ...

  9. Ajax跨域实现淘宝/百度搜索下拉提示效果

    最近学到Ajax,觉得自己对与前后端的数据交互有了一个基本的了解.下面是Ajax应用到淘宝/百度的搜索功能的一个简单的小实例,就是输入一个词,下拉框中自动显示匹配的内容:

随机推荐

  1. 利用Formdata实现form提交文件上传不跳转页面

    作者:幻月九十链接:https://www.zhihu.com/question/19631256/answer/119911045来源:知乎著作权归作者所有,转载请联系作者获得授权. $('form ...

  2. 体验CoreCLR的stack unwinding特性在Linux/Mac上的初步实现

    有了stack unwinding特性,才能在.NET程序中获取调用堆栈(call stack)信息,才能在异常时显示调用堆栈信息.这个特性之前只在Windows上有实现,Linux/Mac上的实现最 ...

  3. IFrame 高度自适应的两种方式 .

    iframe 高度自适应一般是指: iframe 本身的高度 =  内容高度. 这样做可以使最外层不出现滚动条. 如果网页内容使用了Ajax方式填充内容的话. 由于内容是动态的. 以上方式应该变为: ...

  4. [学习笔记] Dispose模式

    Dispose模式是.NET中很基础也很重要的一个模式,今天重新复习一下相关的东西并记录下来. 什么是Dispose模式? 什么时候我们该为一个类型实现Dispose模式 使用Dispose模式时应该 ...

  5. JavaScript text highlighting JQuery plugin

    介绍一个JQuery的插件,用来在页面上高亮显示匹配到的字符串. Demo 点击下面的两个链接以查看效果: highlight javascript 点击Remove highlights移除高亮显示 ...

  6. [BTS] The value "" for the property InboundId is invalid

    Microsoft.ServiceModel.Channels.Common.MetadataException: Retrieval of Operation Metadata has failed ...

  7. [Java拾遗四]JavaWeb基础之Servlet_Request&&Response

    今天来回顾下之前学过Servle的Resquest以及Response的知识.1,Request和Response技术:    rr的作用:        request是请求,封装用户的请求信息.若 ...

  8. Javascript函数的简单学习

    第九课函数的定义与调用1:函数的定义    语法格式    function 函数名(数据类型 参数1){//function是定义函数的关键字        方法体;//statements,用于实 ...

  9. C#:Oracle数据库带参PLSQL语句的正确性验证

    在有Oracle数据库C#项目中,有一个这样的需求:在界面上配置了带参数的PLSQL语句,但是要通过程序验证其正确性,那么该如何实现?这就是本文要探讨的内容. 一:通过OracleCommand对象的 ...

  10. 安装 Autoconf 2.69版

    发生错误configure.ac:8: error: Autoconf version 2.64 or higher is required 1.检查版本 [root@localhost Deskto ...