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

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. 使用inno setup 制作安装文件-demo1

    ; 脚本由 Inno Setup 脚本向导 生成! ; 有关创建 Inno Setup 脚本文件的详细资料请查阅帮助文档! #define MyAppName "查体管理系统" # ...

  2. 讲讲python“=”运算符上的优雅语法

    心路历程: 之前学linux,虽然学的行算不错,不过总感觉差了点什么,自己找不到也说不出来:直到有一天我看到别人mount上了一个普通文件: 当时给我的感觉这太不可思议了,这个文件又不是块设备:后来脑 ...

  3. django -- 插入行的不同方式

    在django中行是Model的一个实例.也就是说一个Model的实例就对应着一行. 一.通过构造函数创建行: import django django.setup() from polls.mode ...

  4. MySql（十七）：MySql架构设计——高可用设计之思路及方案

    前言: 数据库系统是一个应用系统的核心部分,要想系统整体可用性得到保证,数据库系统就不能出现任何问题.对于一个企业级的系统来说,数据库系统的可用性尤为重要.数据库系统一旦出现问题无法提供服务,所有系统 ...

  5. Java数据结构和算法（六）：前缀、中缀、后缀表达式

    前面我们介绍了三种数据结构,第一种数组主要用作数据存储,但是后面的两种栈和队列我们说主要作为程序功能实现的辅助工具,其中在介绍栈时我们知道栈可以用来做单词逆序,匹配关键字符等等,那它还有别的什么功能吗 ...

  6. Android 调试利器：Stetho + Chrome

    简介 Stetho 由 Facebook 开发的一款查看 Android 数据库.SharePreference.网络拦截器的利器,通过与 Chrome 的配合使用,使 Android App 开发过 ...

  7. 802.11ax前瞻4：802.11ax与HiperLan

    序言 在早期wi-fi发展过程中,欧洲还出现过一个同期的无线局域网协议.HiperLan .所谓网络发展始终是"分久必合.合久必分".不管是有线网络当前SDN的引入.还是无线网络下 ...

  8. testbench的设计 文件读取和写入操作 源代码

    十大基本功之 testbench 1. 激励的产生 对于 testbench 而言,端口应当和被测试的 module 一一对应.端口分为 input,output 和 inout 类型产生激励信号的时 ...

  9. vue-router新手指南

    在学习完vue.js以及vuex之后,我们还剩下vue全家桶中的最后一个需要学习的组件,这就是vue-router了,本篇文章我们就来一起认识和入门vue-router.为什么我们只是入门呢?因为在这 ...

  10. CCShatteredTiles3D

    CCSprite* pImgBg = CCSprite::create("1.png"); pImgBg->setPosition(ccp(CCDirector::share ...