jquery+css实现邮箱自动补全
今天在公司做一个电子商务网站的注册会员时,要求用户在电子邮箱文本框中输入时,给与热点提示常用的电子邮箱,帮助用户选择,提高体验效果。下面是用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+css实现邮箱自动补全的更多相关文章
- jQuery UI:邮箱自动补全函数
$('#email').autocomplete({ delay:0, autoFocus:true, source:function(request,response){ var hosts = [ ...
- 【jquery】邮箱自动补全 + 上下翻动
最近在做通行证项目,里面注册模块有邮箱注册,需求方想要在输入 @ 后触发下拉框显示各个邮箱,效果如下: html 代码: <!DOCTYPE HTML> <html lang=&qu ...
- js邮箱自动补全
邮箱自动补全js和jQuery html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
- 复利计算器(4)——jQuery界面美化、自动补全
一.分工 这次终于可以跟小伙伴合作了,经过讨论,我负责界面的美化和输入框自动补全,小伙伴擅长安卓,于是将复利计算器弄成app的任务就交给了小伙伴.为了我们两人团队,我们都好奋斗哈哈哈!! 二.界面美化 ...
- jQuery邮箱自动补全代码
JScript 代码 复制 (function($){ $.fn.emailMatch= function(settings){ var defaultSettings = { emailTip: ...
- 知问前端——自动补全UI
自动补全(autocomplete),是一个可以减少用户输入完整信息的UI工具.一般在输入邮箱.搜索关键字等,然后提取出相应完整字符串供用户选择. 调用autocomplete()方法 var hos ...
- 第一百八十一节,jQuery-UI,知问前端--自动补全 UI--邮箱自动补全
jQuery-UI,知问前端--自动补全 UI--邮箱自动补全 学习要点: 1.调用 autocomplete()方法 2.修改 autocomplete()样式 3.autocomplete()方法 ...
- jQuery 邮箱下拉列表自动补全
综述 我想大家一定见到过,在某个网站填写邮箱的时候,还没有填写完,就会出现一系列下拉列表,帮你自动补全邮箱的功能.现在我们就用jQuery来实现一下. 博主原创代码,如有代码写的不完善的地方还望大家多 ...
- jquery实现自动补全邮箱地址
开始做的邮箱补全代码 //检查email邮箱 function isEmail(str) { if (str.indexOf("@") > 0) { return true; ...
随机推荐
- iptables(1)工具详解
一. iptables 查看链表,创建链表,类命令 1. iptables [-t table] -N chain : 创建一条自定义规则的链 1 2 # iptables -t filter ...
- noip_最后一遍_2-图论部分
大体按照 数学 图论 dp 数据结构 这样的顺序 模板集 这个真的只有模板了……………… ·spfa #include<bits/stdc++.h> using namespace std ...
- systemverilog之OOP
what is oop terminology an example class default methods for classes static attibute assigment and c ...
- C++代码学习之一:组合模式例子
#include"AbstractFile.h" void AbstractFile::add(AbstractFile*) { } void AbstractFile::remo ...
- Mysql 随机函数 rand()
rand() 函数主要有两个用处: 1.是产生随机数, 2.是随机排序(在数据较大的时候会变成性能杀手) 实例: 1.产生一个随机数,默认0~1之间的浮点数 SELECT RAND( ) 2.参数指定 ...
- ASP.NET使用Memcached高缓存实例的初级介绍
Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提供动态.数据库驱动网站的速度.Memcached ...
- linux文本界面../和./的区别
linux文本界面../和./的区别 ../代表的是上一个目录 ./代表的当前目录
- LeetCode 653. Two Sum IV – Input is a BST
Given a Binary Search Tree and a target number, return true if there exist two elements in the BST s ...
- json分享
JSON是什么? JavaScript Object Notation (JSON) is a text format for the serialization of structured data ...
- “玲珑杯”ACM比赛 Round #19
A -- A simple math problem Time Limit:2s Memory Limit:128MByte Submissions:1599Solved:270 DESCRIPTIO ...