jQuery实现文本框邮箱输入自动补全效果

2024-12-08 16:39:11

邮箱自动完成的效果在网站上大多都看过，但是质量参差不齐，今天突然在网上看到一篇博客，感觉这个插件很好，就想来写一下分享给大家！

效果图如下：

完整demo代码如下：

<!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>
<title>邮箱地址自动完成功能</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style>
.demo p {width:1000px; margin-left:auto; margin-right:auto;}
.input{padding:12px; width:300px; border:1px solid #c2c2c2; border-radius:4px; box-shadow:0 0 1px #fff, inset 0 0 2px rgba(0,0,0,.15); background-color:#F2F2F2; font-size:14px;}
.emailist{border:1px solid #bdbdbd; border-radius: 4px; background-color:#fff; color:#666; font-size:14px; list-style-type:0; padding:0; margin:0; overflow:hidden;}
.emailist li{padding:2px 11px; cursor:pointer;}
.emailist .on, .emailist li:hover{background-color:#eee;}
</style>
</head>
<body>
 <div class="demo">
 <p><input type="email" class="input inputMailList" name="email" placeholder="请输入邮箱" required autofocus autocomplete="off"></p>
 </div>
</body>
</html>
<script src="js/jquery-1.6.2.min.js"></script>
<script src="js/jquery.mailAutoComplete-4.0.js"></script>
<script type="text/javascript">
$(".inputMailList").mailAutoComplete();//使用方法
</script>

js实现效果代码（jquery.mailAutoComplete-4.0.js）如下：

(function($) {
 $.fn.mailAutoComplete = function(options) {
  var defaults = {
   className: "emailist",
   email:  ["qq.com","gmail.com","126.com","163.com","hotmail.com","yahoo.com","yahoo.com.cn","live.com","sohu.com","sina.com"], //邮件数组
   zIndex: 11
  };
  // 最终参数
  var params = $.extend({}, defaults, options || {});

  // 是否现代浏览器
  var isModern = typeof window.screenX === "number", visibility = "visibility";
  // 键值与关键字
  var key = {
   "up": 38,
   "down": 40,
   "enter": 13,
   "esc": 27,
   "tab": 9
  };
  // 组装HTML的方法
  var fnEmailList = function(input) {
   var htmlEmailList = '', arrValue = input.value.split("@"), arrEmailNew = [];
   $.each(params.email, function(index, email) {
    if (arrValue.length !== 2 || arrValue[1] === "" || email.indexOf(arrValue[1].toLowerCase()) === 0) {
     arrEmailNew.push(email);
    }
   });
   $.each(arrEmailNew, function(index, email) {
    htmlEmailList = htmlEmailList + '<li'+ (input.indexSelected===index? ' class="on"':'') +'>'+ arrValue[0] + "@" + email +'</li>';
   });
   return htmlEmailList;
  };
  // 显示还是隐藏
  var fnEmailVisible = function(ul, isIndexChange) {
   var value = $.trim(this.value), htmlList = '';
   if (value === "" || (htmlList = fnEmailList(this)) === "") {
    ul.css(visibility, "hidden");
   } else {
    isIndexChange && (this.indexSelected = -1);
    ul.css(visibility, "visible").html(htmlList);
   }
  };

  return $(this).each(function() {
   this.indexSelected = -1;
   // 列表容器创建
   var element = this;
   var eleUl = $('<ul></ul>').css({
    position: "absolute",
    marginTop: element.offsetHeight,
    minWidth: element.offsetWidth - 2,
    visibility: "hidden",
    zIndex: params.zIndex
   }).addClass(params.className).bind("click", function(e) {
    var target = e && e.target;
    if (target && target.tagName.toLowerCase() === "li") {
     $(element).val(target.innerHTML).trigger("input");
     $(this).css(visibility, "hidden");
     element.focus(); // add on 2013-11-20
    }
   });
   $(this).before(eleUl);
   // IE6的宽度
   if (!window.XMLHttpRequest) { eleUl.width(element.offsetWidth - 2); } 

   // 不同浏览器的不同事件
   isModern? $(this).bind("input", function() {
    fnEmailVisible.call(this, eleUl, true);
   }): element.attachEvent("onpropertychange", function(e) {
    if (e.propertyName !== "value") return;
    fnEmailVisible.call(element, eleUl, true);
   });

   $(document).bind({
    "click": function(e) {
     var target = e && e.target, htmlList = '';
     if (target == element && element.value && (htmlList = fnEmailList(element, params.email))) {
      eleUl.css(visibility, "visible").html(htmlList);
     } else if (target != eleUl.get(0) && target.parentNode != eleUl.get(0)) {
      eleUl.css(visibility, "hidden");
     }
    },
    "keydown": function(e) {
     var eleLi = eleUl.find("li");
     if (eleUl.css(visibility) === "visible") {
      switch (e.keyCode) {
       case key.up: {
        element.indexSelected--;
        if (element.indexSelected < 0) {
         element.indexSelected = -1 + eleLi.length;
        }
        e.preventDefault && e.preventDefault();
        break;
       }
       case key.down: {
        element.indexSelected++;
        if (element.indexSelected >= eleLi.length) {
         element.indexSelected = 0;
        }
        e.preventDefault && e.preventDefault();
        break;
       }
       case key.enter: {
        e.preventDefault();
        eleLi.get(element.indexSelected) && $(element).val(eleLi.eq(element.indexSelected).html());
        eleUl.css("visibility", "hidden");
        break;
       }
       case key.tab: case key.esc: {
        eleUl.css("visibility", "hidden");
        break;
       }
      }
      if (element.indexSelected !== -1) {
       eleUl.html(fnEmailList(element));
      }
     }
    }
   });
  });
 };
})(jQuery);

以上就是本文的全部内容，希望对大家的学习有所帮助。

js自动闭合html标签(自动补全html标记)

复制代码代码如下: <script type="text/javascript"> // Close HTML Tags -------------------------------------------- function closeHTML(str){ var arrTags=["span","font","b","u","i","h1",&qu
jquery css实现邮箱自动补全

今天在公司做一个电子商务网站的注册会员时,要求用户在电子邮箱文本框中输入时,给与热点提示常用的电子邮箱,帮助用户选择,提高体验效果.下面是用Jquery+css实现的邮箱自动补全,供大家参考和学习. HTML代码:emailAutoComple.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>邮箱自动补全&l
PHP实现HTML标签自动补全代码

一般情况下先用PHP的 strip_tags 函数去掉所有html标签,再去掉空格等,然后再用substr或者自己实现的cn_substr函数来实现截取.因为如果不先去掉html标签,直接截取出来的字符串就会有没有闭合的标签出现,有时甚至会截取在标签上面比如复制代码代码如下: </di ... 今天遇到一个内容翻页截取问题: 正文是用富文本编辑器写入的,编辑器上有个分页按钮,点击之后就往当前光标位置插入一个蓝色的复制代码代码如下: <hr /> 横线.然后php直接存入数据库.显
inputSuggest文本框输入时提示、自动完成效果(邮箱输入自动补全插件)

像QQ邮箱提示.百度的搜索框提示.淘宝的商品搜索提示等,现在有不少的网站都有类似效果,以提升用户体验. 使用方法: new InputSuggest({ input HTMLInputElement 必选 data Array ['sina.cn','sina.com','2008.sina.com','vip.sina.com.cn'] 必选 containerCls 容器className itemCls 容器子项className activeCls 高亮子项className width
再说AutoComplete自动补全之实现原理

一.简述昨天support一同事,帮她的客户做类似下面的效果(自动完成): 以前在搜房的时候,弄过这个,调用楼盘字典: 这是一个小功能,也是一个大功能.因为它可以做大,也可以做小.二.搜房的AutoComplete 比如上面我们看到搜房的这个就做大了,你要看到这样一个效果,其实搜房做了这么几件事: 1.数据库作业.把每天的楼盘字典存入XML,每个城市的对应一个XML.比如今天生成的bj_11_04.xml 2.业务逻辑层加上Memcached.用户访问的时候,先判断Memcached里有没有,
给Python IDLE加上自动补全和历史功能

许多时候,我们使用Python,并不用写一个程序,一些不复杂的任务,我更喜欢在 IDLE(也就是交互式提示模式)下输入几行代码完成.然而,在这个模式下编辑代码,也有不够便利的地方,最主要的就是,不能用Tab自动补全,不能记忆上一次输入的命令(没办法,谁让我们在Shell下习惯了呢). 这时候,我们可以直接使用Python启动脚本,解决这个问题. 启动脚本的程序非常简单,这里不多说明,只给出代码: import readline import rlcompleter import atexit
Python实现Tab自动补全和历史命令管理的方法

本文实例讲述了Python实现Tab自动补全和历史命令管理的方法.分享给大家供大家参考.具体分析如下: Python的startup文件,即环境变量 PYTHONSTARTUP 对应的文件 1. 为readline添加tab键自动补全的功能 2. 像Shell一样管理历史命令代码如下: 复制代码代码如下: import rlcompleter import readline import atexit import os # http://stackoverflow.com/question
jQuery 插件autocomplete自动完成应用(自动补全)(asp.net后台)

autocomplete官网 : http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ (可下载jQuery autocomplete插件). 淘宝商品搜索功能效果: 下面来使用 autocomplete插件来实现类似效果.1. 创建 AjaxPage.aspx 页面,在其中定义 WebMethod 方法来返回搜索页面需要的输入框所有提示条目. 后台代码如下: 复制代码代码如下: using System.Coll
JSP + ajax实现输入框自动补全功能实例代码

下面是我用ajax实现的输入框自动补全功能,数据库数据很少,大体模仿出了百度首页的提示功能,当然,人家百度的东西不只是这么简单的!先看运行效果: index.jsp(包含主要的js代码) 复制代码代码如下: <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath();
Python 自动补全(vim)

一.vim python自动补全插件:pydiction 可以实现下面python代码的自动补全: 1.简单python关键词补全 2.python 函数补全带括号 3.python 模块补全 4.python 模块内函数,变量补全 5.from module import sub-module 补全想为vim启动自动补全需要下载插件,地址如下: http://vim.sourceforge.net/scripts/script.php?script_id=850 https://github

jQuery实现文本框邮箱输入自动补全效果

相关推荐

随机推荐