最近在做通行证项目，里面注册模块有邮箱注册，需求方想要在输入 @ 后触发下拉框显示各个邮箱，效果如下：

html 代码：

<!DOCTYPE HTML>

<html lang="en">

<head>

    <meta charset="utf-8"/>

    <title>邮箱自动补全</title>

    <link rel="stylesheet" type="text/css" href="autoComplete.css" media="all"/>

</head>

<body>

    <h1>邮箱自动补全 + 上下翻动</h1>

    <p>当在输入框内输入 @ 时，自动显示各个邮箱的下拉列表。</p>

    <div class="wrap">

        <form action="result.php" method="post">

            <input type="text" name="email" id="email" class="inp" autocomplete="off"/><br/><br/>

            <input type="text" name="other" class="inp" autocomplete="off"/><br/><br/>

            <input type="submit" value="提交表单" id="submit"/>

        </form>

    </div>

</body>

</html>

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript" src="jquery.autoComplete.js"></script>

<script type="text/javascript">

$(function(){

    $.AutoComplete('#email');

});

</script>

css 代码：

@charset 'utf-8';

.wrap{width:200px;margin:0 auto;}

h1{font-size:36px;text-align:center;line-height:60px;}

p{font-size:20px;text-align:center;line-height:60px;}

.inp{width:190px;border:1px solid #ccc;border-radius:5px;height:30px;line-height:30px;padding:5px;}

#AutoComplete{background:#fff;border:1px solid #4190db;display:none;width:200px;}

#AutoComplete ul{list-style-type:none;margin:;padding:;}

#AutoComplete li{color:#333;cursor:pointer;font:12px/22px \5b8b\4f53;text-indent:5px;}

#AutoComplete .hover{background:#6eb6fe;color:#fff;}

js 代码：

jQuery.AutoComplete = function(selector){

    var elt = $(selector);

    var autoComplete,autoLi;

    var strHtml = [];

    strHtml.push('<div class="AutoComplete" id="AutoComplete">');

    strHtml.push('    <ul class="AutoComplete_ul">');

    strHtml.push('        <li class="AutoComplete_title">请选择邮箱后缀</li>');

    strHtml.push('        <li hz="@qq.com"></li>');

    strHtml.push('        <li hz="@163.com"></li>');

    strHtml.push('        <li hz="@126.com"></li>');

    strHtml.push('        <li hz="@sohu.com"></li>');

    strHtml.push('        <li hz="@sina.com"></li>');

    strHtml.push('    </ul>');

    strHtml.push('</div>');

    $('body').append(strHtml.join(''));

    autoComplete = $('#AutoComplete');

    autoComplete.data('elt',elt);

    autoLi = autoComplete.find('li:not(.AutoComplete_title)');

    autoLi.mouseover(function(){

        $(this).siblings().filter('.hover').removeClass('hover');

        $(this).addClass('hover');

    }).mouseout(function(){

        $(this).removeClass('hover');

    }).mousedown(function(){

        autoComplete.data('elt').val($(this).text()).change();

        autoComplete.hide();

    });

    //用户名补全+翻动

    elt.keyup(function(e){

        if(/13|38|40|116/.test(e.keyCode) || this.value == ''){

            return false;

        }

        var username = this.value;

        if(username.indexOf('@') == -1){

            autoComplete.hide();

            return false;

        }

        autoLi.each(function(){

            this.innerHTML = username.replace(/\@+.*/,'') + $(this).attr('hz');

            if(this.innerHTML.indexOf(username) >= 0){

                $(this).show();

            }else{

                $(this).hide();

            }

        }).filter('.hover').removeClass('hover');

        autoComplete.show().css({

            left: $(this).offset().left,

            top: $(this).offset().top + $(this).outerHeight(true) - 1,

            position: 'absolute',

            zIndex: '99999'

        });

        if(autoLi.filter(':visible').length == 0){

            autoComplete.hide();

        }else{

            autoLi.filter(':visible').eq(0).addClass('hover');

        }

    }).keydown(function(e){

        if(e.keyCode == 38){ //上

            autoLi.filter('.hover').prev().not('.AutoComplete_title').addClass('hover').next().removeClass('hover');

        }else if(e.keyCode == 40){ //下

            autoLi.filter('.hover').next().addClass('hover').prev().removeClass('hover');

        }else if(e.keyCode == 13){ //Enter

            autoLi.filter('.hover').mousedown();

            e.preventDefault();    //如有表单，阻止表单提交

        }

    }).focus(function(){

        autoComplete.data('elt',$(this));

    }).blur(function(){

        autoComplete.hide();

    });

}

result.php

<?php

echo $_POST['email'] . "<br/>" . $_POST['other'];

?>

demo：点此下载

【jquery】邮箱自动补全 + 上下翻动的更多相关文章

  1. jQuery邮箱自动补全代码

    JScript 代码   复制 (function($){ $.fn.emailMatch= function(settings){ var defaultSettings = { emailTip: ...

  2. jquery+css实现邮箱自动补全

    今天在公司做一个电子商务网站的注册会员时,要求用户在电子邮箱文本框中输入时,给与热点提示常用的电子邮箱,帮助用户选择,提高体验效果.下面是用Jquery+css实现的邮箱自动补全,供大家参考和学习. ...

  3. js邮箱自动补全

    邮箱自动补全js和jQuery html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  4. jQuery AutoComplete 自动补全

    jQuery.AutoComplete是一个基于jQuery的自动补全插件.借助于jQuery优秀的跨浏览器特性,可以兼容Chrome/IE/Firefox/Opera/Safari等多种浏览器. 特 ...

  5. jquery实现自动补全邮箱地址

    开始做的邮箱补全代码 //检查email邮箱 function isEmail(str) { if (str.indexOf("@") > 0) { return true; ...

  6. jquery.autocomplete自动补全功能

    项目实例: 一:js //SupplierAutoComplete.js $().ready(function () { $("#txtSupplier").autocomplet ...

  7. jQuery UI：邮箱自动补全函数

    $('#email').autocomplete({ delay:0, autoFocus:true, source:function(request,response){ var hosts = [ ...

  8. Bootstrap Typeahead/Jquery autocomplete自动补全

    使用Bootstrap Typeahead 组件: Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,自动填充. 效果如图所示: 实现方式: 1.引入 ...

  9. jquery autocomplete自动补全

    简单用法: $(function(){ var data = "the People's Republic of China".split(" "); $(&q ...

随机推荐

  1. 【转载】Spring @Async 源码解读。

    由于工作中经常需要使用到异步操作,一直在使用@Async, 今天抽空学习了一下它的执行原理,刚好看到一篇写的很棒的文章,这里转载过来做个记录,感谢原作者的无私奉献. 原文章链接地址:https://w ...

  2. 有关 WCF 的一些错误处理

    错误消息: System.ServiceModel.EndpointNotFoundException: 无法调度消息,因为终结点地址"net.tcp://localhost/xxx.svc ...

  3. OpenGL学习脚印：深度測试(depth testing)

    写在前面 上一节我们使用AssImp载入了3d模型,效果已经令人激动了.可是绘制效率和场景真实感还存在不足,接下来我们还是要保持耐心,继续学习一些高级主题,等学完后面的高级主题,我们再次来改进我们载入 ...

  4. iOS-一个弹出菜单动画视图开源项目分享

    相似于Tumblr公布button的弹出视图 使用非常easy: 初始化: @property (nonatomic, strong) XWMenuPopView *myMenuPopView; - ...

  5. Atitit 个人信息数据文档知识分类

    Atitit 个人信息数据文档知识分类 1.1. 知识分类法,参照图书分类法 1 2. Attilax知识分类 2 2.1. 公共文档(一般技术资料,通过标题可以网上搜索到的) 2 2.2. sum ...

  6. 关于generate用法的总结

    Abtract generate语句允许细化时间(Elaboration-time)的选取或者某些语句的重复.这些语句可以包括模块实例引用的语句.连续赋值语句.always语句.initial语句和门 ...

  7. 根据第三方提供的webservice地址获取文件信息

    import org.apache.axis.client.Call; import org.apache.axis.client.Service; import org.apache.axis.en ...

  8. Java 的 I/O 类库的基本架构

    Java 的 I/O 类库的基本架构 I/O 问题是任何编程语言都无法回避的问题,可以说 I/O 问题是整个人机交互的核心问题,因为 I/O 是机器获取和交换信息的主要渠道.在当今这个数据大爆炸时代, ...

  9. (原)logstash-forwarder + logstash + elasticsearch + kibana

    [logstash-forwarder + logstash + elasticsearch + kibana]-------------------------------------------- ...

  10. 【ARM】arm异常中断处理知识点

    ARM处理器7种类型异常 按优先级从高到低的排列如下: 复位异常(Reset) 数据异常(Date Abort) 快速中断异常(FIQ) 外部中断异常(IRQ) 预取异常(Prefetch Abort ...