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

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. uiautomatorviewer 查看元素新思路

    用adb 命令把图片和uix获取出来,再导入uiautomatorviewer adb shell uiautomator dump /data/local/tmp/uidump.uixadb pul ...

  2. js前台取用后台传递过来的map集合方式

    在处理有些特殊需求的时候,我们需要在前台页面的js中获取后台传递过来的map集合类型的参数,并且进行调用,代码如下: 在后台我们拼装出如下的集合: Map<String,Grade> gr ...

  3. ${HADOOP_CONF_DIR:-$HADOOP_PREFIX/$DEFAULT_CONF_DIR}

      在hadoop-config.sh中,有如下语句:${HADOOP_CONF_DIR:-$HADOOP_PREFIX/$DEFAULT_CONF_DIR}                     ...

  4. php分享十八：网页抓取

    一.抓取远程图片到本地,你会用什么函数? 方法1:利用readfile读取远程图片到缓冲中,然后写入新的文件 function grabImage($url, $filename = '') { if ...

  5. 微服务，ApiGateway 与 Kong

    一. 微服务 二. Api Gateway 三. Kong 的使用 一. 微服务 对于一些传统的 大型项目,传统的方式会有一些缺陷,比如说 新人熟悉系统成本高(因为整个系统作为一个整体,彼此会有一定的 ...

  6. 【Unity】10.4 类人动画角色的控制

    分类:Unity.C#.VS2015 创建日期:2016-05-02 一.简介 导入角色网格和动画及设置 Avatar 之后,就可以准备开始在游戏中使用它们了.以下部分涵盖 Mecanim 提供的.用 ...

  7. pip3 install jupyter出现错误

    问题描述 出现如下错误: Command "/Users/wang/.pyenv/versions/3.3.1/bin/python3.3 -u -c "import setupt ...

  8. LeetCode: Triangle 解题报告

    Triangle Given a triangle, find the minimum path sum from top to bottom. Each step you may move to a ...

  9. Django admin 常用方法 model 增加只读权限

    1.Django admin model 设置查看权限 Django model 默认只有增加.删除.修改权限.没有查看权限 #model class Ad_Campaing(models.Model ...

  10. js jquery 函数回调

    JS 函数回调 $('#btn_update').click(function () { var table_id = $table.bootstrapTable('getSelections')[0 ...