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

HTML代码：emailAutoComple.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<title>邮箱自动补全</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="css/emailAutoComple.css">
 
 
 
 
 
 
<form action="">
           姓名：<input type="text" name="userName" id="userName"><br>
           邮箱：<input type="text" name="email" id="email">
</form>

JS代码：js/emailAutoComple.js（实现自动补全的关键代码）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
jQuery.AutoComplete = function(selector){
    var elt = $(selector);
    var strHtml = '<div class="AutoComplete" id="AutoComplete">'+
                '        <ul class="AutoComplete_ul">'+
                '            <li hz="@163.com"></li>'+
                '            <li hz="@126.com"></li>'+
                '            <li hz="@139.com"></li>'+
                '            <li hz="@189.com"></li>'+
                '            <li hz="@qq.com"></li>'+
                '            <li hz="@vip.sina.com"></li>'+
                '            <li hz="@sina.cn"></li>'+
                '            <li hz="@sina.com"></li>'+
                '            <li hz="@sohu.com"></li>'+
                '            <li hz="@hotmail.com"></li>'+
                '            <li hz="@gmail.com"></li>'+
                '            <li hz="@wo.com.cn"></li>'+
                '            <li hz="@21cn.com"></li>'+
                '            <li hz="@aliyun.com"></li>'+
                '            <li hz="@yahoo.com"></li>'+
                '            <li hz="@foxmail.com"></li>'+
                '        </ul>'+
                '    </div>';
    //将div追加到body上
    $('body').append(strHtml);         
    var autoComplete,autoLi;
    autoComplete = $('#AutoComplete');       
    autoComplete.data('elt',elt);
    autoLi = autoComplete.find('li');
    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){ //确定
            autoLi.filter('.hover').mousedown();
        }
    }).focus(function(){
        autoComplete.data('elt',$(this));
    }).blur(function(){
        autoComplete.hide();
    });
};

CSS代码：css/emailAutoComple.css

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

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

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

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

效果图：

 
分类: jquery

jquery+css实现邮箱自动补全的更多相关文章

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

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

  2. 【jquery】邮箱自动补全 + 上下翻动

    最近在做通行证项目,里面注册模块有邮箱注册,需求方想要在输入 @ 后触发下拉框显示各个邮箱,效果如下: html 代码: <!DOCTYPE HTML> <html lang=&qu ...

  3. js邮箱自动补全

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

  4. 复利计算器（4）——jQuery界面美化、自动补全

    一.分工 这次终于可以跟小伙伴合作了,经过讨论,我负责界面的美化和输入框自动补全,小伙伴擅长安卓,于是将复利计算器弄成app的任务就交给了小伙伴.为了我们两人团队,我们都好奋斗哈哈哈!! 二.界面美化 ...

  5. jQuery邮箱自动补全代码

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

  6. 知问前端——自动补全UI

    自动补全(autocomplete),是一个可以减少用户输入完整信息的UI工具.一般在输入邮箱.搜索关键字等,然后提取出相应完整字符串供用户选择. 调用autocomplete()方法 var hos ...

  7. 第一百八十一节，jQuery-UI，知问前端--自动补全 UI--邮箱自动补全

    jQuery-UI,知问前端--自动补全 UI--邮箱自动补全 学习要点: 1.调用 autocomplete()方法 2.修改 autocomplete()样式 3.autocomplete()方法 ...

  8. jQuery 邮箱下拉列表自动补全

    综述 我想大家一定见到过,在某个网站填写邮箱的时候,还没有填写完,就会出现一系列下拉列表,帮你自动补全邮箱的功能.现在我们就用jQuery来实现一下. 博主原创代码,如有代码写的不完善的地方还望大家多 ...

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

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

随机推荐

  1. vue+element UI如何导出excel表

    导出excel表应按如下规则 首先要先安装如下依赖 npm install --save xlsx npm install --save file-saver 接下在在你的代码中去引用这两个 impo ...

  2. 初涉倍增&&LCA【在更】

    一种特殊的枚举算法 什么是倍增 顾名思义,即每一次翻倍增加.那么,这样我们就有了一种$O(logn)$阶的方法处理枚举方面的问题了. 参考:[白话系列]倍增算法 一些题目 [倍增]luoguP1613 ...

  3. python 连接redis cluster

    #!/usr/bin/env python # encoding: utf-8 #@author: 东哥加油! #@file: clear_pool.py #@time: 2018/8/28 17:0 ...

  4. layer的iframe层的传参和回参

    从父窗口传参给iframe,参考://https://yq.aliyun.com/ziliao/133150 从iframe回参给父窗口,参考:https://www.cnblogs.com/jiqi ...

  5. 【php】子类覆盖超类方法，在超类里调用此方法会出现何种现象

    <?php class A { public function getName() { echo $this->name(); } function name () { return 'l ...

  6. 【php】 php 的注释和结束符号之间的关系

    Closing PHP tags are recognised within single-line comments: <?php    // Code will end here ?> ...

  7. Pandas中loc，iloc与直接切片的区别

    最近使用pandas,一直搞不清楚其中几种切片方法的区别,今天专门看了一下. 0. 把Series的行index或Dataframe的列名直接当做属性来索引. 如: s.index_name df.c ...

  8. python模块--random

    random主要用于生成随机字符串等,例如登录页面上随机字符串验证. random常用方法: import random print(random.randrange(1, 10)) # 返回1-10 ...

  9. Ubuntu 清理卸载残留文件

    dpkg -l |grep ^rc|awk '{print $2}' |sudo xargs dpkg -P

  10. bootshiro---开源的后台管理框架--基于springboot2+ shiro+jwt的真正rest api资源无状态认证权限管理框架,开发人员无需关注权限问题,后端开发完api,前端页面配置即可

    https://gitee.com/tomsun28/bootshiro