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

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. jmeter 插件下载下载方法

    1.进入下载插件网页:https://jmeter-plugins.org/install/Install/ 下载plugin-manager.jar 并放在jmeter 的lib/ext文件夹下 2 ...

  2. 将多个 docx 文件使用 POI 进行合并,生成单个文档,包含图片

    1 添加 maven 依赖,需要使用 poi 的依赖项 <!-- https://mvnrepository.com/artifact/org.apache.poi/poi-scratchpad ...

  3. django 自动化测试的故障排查

    [问题背景] django使用mysql做为后台数据库.在使用django的自动化测试命令test时报如下错误 python3 manage.py test polls Creating test d ...

  4. Talend 将Oracle中数据导入到hive中,根据系统时间设置hive分区字段

    首先,概览下任务图: 流程是,先用tHDFSDelete将hdfs上的文件删除掉,然后将oracle中的机构表中的数据导入到HDFS中:建立hive连接->hive建表->tJava获取系 ...

  5. 怎么部署 .NET Core Web项目 到linux

    .NET Core is free, open source, cross platform and runs basically everywhere. STEP 0 - GET A CHEAP H ...

  6. [MeetCoder] Crossing Bridge

    Crossing Bridge Description N people wish to cross a bridge at night. It’s so dark around there that ...

  7. 使用 Apache Commons CLI 开发命令行工具示例

    Apache Commons CLI 简介 Apache Commons CLI 是 Apache 下面的一个解析命令行输入的工具包,该工具包还提供了自动生成输出帮助文档的功能. Apache Com ...

  8. 关于有些.aidl源码的eclipse编译后生成.java文件的错

    最近下载了一个aidl源码.导入到eclipse.一直报错.无法运行到. (我是1号图) 2. .然后怎么想都不知道怎么解决.百度和谷歌了n遍. 还是找不到.后来在一个不起眼的地方看到说: aidl不 ...

  9. Shiro系列(1) - 权限管理的介绍与原理

    1. 什么是权限管理 一般来说,只要有用户参与,那么该系统都会需要权限管理,权限管理实现了对用户访问系统  指定功能的限制,按照管理员定义的安全规则或权限策略,限制用户只能访问自己被授权的那些资源路径 ...

  10. asp.net mvc中的用户登录验证过滤器

    在WEB项目中建立 类:      public class LoginFilter : ActionFilterAttribute     {         public override voi ...