邮箱自动补全js和jQuery

html：　　　

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实现输入框自动补全邮箱提示 - 素材家园</title>
<link href="css/sucaijiayuan.css" type="text/css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/emailAutoComplete.js"></script>
</head>
<body>
<center>
<h1>输入邮箱试试！</h1>
<br />
<div class="parentCls"><input type="text" class="inputElem"></div>
</center>
</body>
</html>

js： email.js

　　　　

@charset "utf-8";
* { outline:none;
margin:0;
padding:0;
font-family:microsoft yahei;
}
ul, li {
list-style:none;
}
.inputElem {
width:220px;
height:26px;
line-height:26px;
padding: 0px 4px;
color: #666666;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: 1px solid;
border-color: #b8b8b8 #dcdcdc #dcdcdc #b8b8b8;

}
.parentCls {
margin-bottom: 10px;
border: 2px solid #f2f2f2;
}
.auto-tip li {
width:100%;
text-align:left;
height:22px;
line-height:22px;
font-size:14px;
}

.auto-tip li.hoverBg {
background:#ddd;
cursor:pointer;
}
.auto-tip li em{font-style:normal;}
.red {
color:#333;
}
.hidden {
display:none;
}

外加一个jQuery.min.js

js邮箱自动补全的更多相关文章

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

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

  2. jquery+css实现邮箱自动补全

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

  3. jQuery邮箱自动补全代码

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

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

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

  5. 【VS Code】中node.js代码自动补全的方法

    原文链接: https://blog.csdn.net/qq_39189819/article/details/91347484

  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. Ext.data.SimpleStore的使用方法

    Ext.data.SimpleStore简单数据存储器 参数:data:Array数组类型.fields:数组对应的字段名称.var data1=[1,"订单1","16 ...

  2. .net之工作流工程展示及代码分享（二）工作流引擎

    在介绍完表单类的时候,接下来介绍工作流引擎,主要由四个类组成,分别是流程.流程步骤.流程实例.流程步骤实例类. 流程类: [Serializable] public class Flow { [Xml ...

  3. table 边框

    <table width="100%" border="0" cellpadding="2" cellspacing="0& ...

  4. include与require的区别?

    require()语句的性能与include()相类似,都是包括并运行指定文件.不同之处在于:对include()语句来说,在执行文件时每次都要进行读取和评估:而对于require()来说,文件只处理 ...

  5. Hi, there!

    Wish you a happy day~我们一起玩WEB前端!^ ^

  6. Bash:-:-通过awk获取文本变量的赋值

    txt格式: ... logport='13000' sessionport='23000' ... ######################## 只获取logport的赋值13000 awk ' ...

  7. System.Configuration引用后ConfigurationManager方法用不了

    System.Configuration引用后ConfigurationManager方法却用不了,提示没有引用 需手动添加引用 项目-引用-右击-添加引用-找到System.Configuratio ...

  8. 谈谈html5存储之IndexdDB

    IndexdDB简介 html5中indexdDB是一种能在浏览器持久的存储结构化数据的数据库:且具有丰富的查询能力. 新建一个IndexdDB数据库 IDBOpenDBRequest定义有几个重要的 ...

  9. Windows下部署Appium教程(Android App自动化测试框架搭建)

    摘要: 1,appium是开源的移动端自动化测试框架: 2,appium可以测试原生的.混合的.以及移动端的web项目: 3,appium可以测试ios.android.firefox os: 4,a ...

  10. JSON总结

    JSON:  关于JSON,最重要的是要理解它是一种数据格式,不是一种编程语言.虽然JSON与JavaScript具有相同的语法形式与JSON具有相同的语法形式,但JSON并不从属于JavaScrip ...