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

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. C#基础第六天-作业-利用面向对象的思想去实现名片

    1.利用面向对象的思想去实现: (增加,修改,删除,查询,查询全部)需求:根据人名去(删除/查询).指定列:姓名,年龄,性别,爱好,电话. 本系列教程: C#基础总结之八面向对象知识点总结-继承与多态 ...

  2. 让Redis在你的系统中发挥更大作用

    Redis在很多方面与其他数据库解决方案不同:它使用内存提供主存储支持,而仅使用硬盘做持久性的存储:它的数据模型非常独特,用的是单线程.另一个大区别在于,你可以在开发环境中使用Redis的功能,但却不 ...

  3. linux分享二：Linux如何修改字符集

    问题: 当在项目中用到服务器端导出并且查询条件中包含汉字时,总是导出失败,Excel中出现null字样,如何解决方法呢? 解决方法: 把linux的字符集改变一下. 路径:etc/sysconfig/ ...

  4. Android基础知识之Manifest文件的组织结构

    原文:http://android.eoe.cn/topic/android_sdk 是AndroidManifest.xml文件中的根标签,她必须包含一个标签和指定的xmlns:android. p ...

  5. 关于NOIP的运行环境

    目前(2019年2月22日)仍然是 G++ , 终端运行,命令行: g++ test.cpp -o test ,而g++ 4.8.4默认标准是: -std=gnu++ . g++到了gcc6才把默认标 ...

  6. MacOS Sierra10.12.4编译Android7.1.1源代码必须跳的坑

    简单介绍 下载Android7.1.1源代码花费了两天,编译整个源代码相同花费了2天,期间遇到无数个坑. 如今编译源代码,一旦中间遇到错误,则要又一次開始. 本文记录编译过程遇到的问题及解决方式,如有 ...

  7. RVM切换ruby版本号

    RVM是Ruby Version Manager的缩写,是一个命令行工具,它能够让你轻松地安装,管理和使用多个版本号的Ruby.不同的rails项目使用等ruby和rails版本号不一样的时候.能够使 ...

  8. Android使用Custom debug keystore

    有时候须要用到第三方API的时候,须要一个key store 的SH1值,比如使用百度地图API,假设是协同开发,就须要全部Eclipse使用同一keystore. 例如以下图所看到的: 这里须要注意 ...

  9. express中的路径区别

    请求的url:http://localhost:3000/api/article/upload?q=1000&n=tom请求方法:postconsole.log('hostname==='+r ...

  10. spark join

    https://jaceklaskowski.gitbooks.io/mastering-apache-spark/content/spark-sql-joins.html https://acadg ...