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

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. VB将MSHFlexGrid数据导出到Excel文件通用功能

    1.通用导出Excel功能. 2.将 MSHFlexGrid数据导出到Excel文件通用功能. 3.具体代码如下: '将下列代码保存到一模块文件中,调用方法:Export fgrid1,cd1 Pub ...

  2. Android studio界面相关设置

    用惯了emacs的操作方式,每当使用一款新的编辑器的时候,第一个想到的就是这个工具有没有emacs的快捷键,Android studio也是一样的. 1. Android studio设置emacs的 ...

  3. gitlab 迁移、升级打怪之路：8.8.5--> 8.10.8 --> 8.17.8 --> 9.5.9 --> 10.1.4 --> 10.2.5

    gitlab 迁移.升级打怪之路:8.8.5--> 8.10.8 --> 8.17.8 --> 9.5.9 --> 10.1.4 --> 10.2.5 gitlab 数据 ...

  4. php分享二十：mysql优化

    1:垂直分割 示例一:在Users表中有一个字段是家庭地址,这个字段是可选字段,相比起,而且你在数据库操作的时候除了个人信息外,你并不需要经常读取或是改写这个字段.那么,为什么不把他放到另外一张表中呢 ...

  5. MySQL循环语句实例教程 mysql while循环测试

    在mysql数据库中操作同样有循环语句操作,标准的循环方式: while 循环 . loop 循环和repeat循环.还有一种非标准的循环: goto. 鉴于goto 语句的跳跃性会造成使用的的思维混 ...

  6. 解决 emoji表情存入数据库为' ??? '

    今天把mysql切换为mariaDB,这是题外话 主要是emoji标签存入数据库会发现出现三个???的问题 页面上也显示不出来,解决办法只要把内容从数据库里拿出来的时候解码即可 for (Feedba ...

  7. iOS7相机隐私判断

    转自:http://borissun.iteye.com/blog/1992303 装了iOS7的ip5的隐私设置里多了相机这一项(ip4装iOS7就没有). 如果隐私里把你的app对应的相机给关了, ...

  8. hdu 2680 Choose the best route （dijkstra算法）

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=2680 /************************************************* ...

  9. python(41):copy拷贝(深拷贝deepcopy与浅拷贝copy)

    Python中的对象之间赋值时是按引用传递的,如果需要拷贝对象,需要使用标准库中的copy模块. 1.copy.copy 浅拷贝 只拷贝父对象,不会拷贝对象的内部的子对象. 2.copy.deepco ...

  10. http post multipart/mixed的文件.

    依赖. <dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId>ht ...