jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】


Posted in Javascript onSeptember 20, 2016

本文实例讲述了jQuery实现输入框邮箱内容自动补全与上下翻动显示效果。分享给大家供大家参考,具体如下:

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

jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】

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:0;padding:0;}
#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'];
?>

完整实例代码点击此处本站下载。

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
写了10年的Javascript也未必全了解的连续赋值运算
Mar 25 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
Feb 27 Javascript
javascript中全局对象的parseInt()方法使用介绍
Dec 19 Javascript
使用jQuery重置(reset)表单的方法
May 05 Javascript
json实现添加、遍历与删除属性的方法
Jun 17 Javascript
javascript 判断一个对象为数组的方法
May 03 Javascript
Three.js利用性能插件stats实现性能监听的方法
Sep 25 Javascript
js获取html页面代码中图片地址的实现代码
Mar 05 Javascript
JS中的事件委托实例浅析
Mar 22 Javascript
Angular 如何使用第三方库的方法
Apr 18 Javascript
如何从零开始利用js手写一个Promise库详解
Apr 19 Javascript
详解Angular Karma测试的持续集成实践
Nov 15 Javascript
原生JS取代一些JQuery方法的简单实现
Sep 20 #Javascript
原生js实现ajax方法(超简单)
Sep 20 #Javascript
原生js仿jquery一些常用方法(必看篇)
Sep 20 #Javascript
原生js封装的一些jquery方法(详解)
Sep 20 #Javascript
jQuery实现的自定义滚动条实例详解
Sep 20 #Javascript
jQuery在ie6下无法设置select选中的解决方法详解
Sep 20 #Javascript
jQuery简单倒计时效果完整示例
Sep 20 #Javascript
You might like
php 方便水印和缩略图的图形类
2009/05/21 PHP
PHP 程序员应该使用的10个组件
2009/10/31 PHP
PHP爆绝对路径方法收集整理
2012/09/17 PHP
PHP正则提取不包含指定网址的图片地址的例子
2014/04/21 PHP
php使用curl打开https网站的方法
2015/06/17 PHP
总结AJAX相关JS代码片段和浏览器模型
2007/08/15 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
2013/03/25 Javascript
jquery等宽输出文字插件使用介绍
2013/09/18 Javascript
JS获取各种浏览器窗口大小的方法
2014/01/14 Javascript
最短的IE判断var ie=!-[1,]分析
2014/05/28 Javascript
js实现回放拖拽轨迹从过程上进行分析
2014/06/26 Javascript
javascript常用函数归纳整理
2014/10/31 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
2015/08/19 Javascript
JQuery操作textarea,input,select,checkbox方法
2015/09/02 Javascript
创建简单的node服务器实例(分享)
2017/06/23 Javascript
详解React Native顶|底部导航使用小技巧
2017/09/14 Javascript
深入理解React高阶组件
2017/09/28 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
2018/01/18 Javascript
js 实现ajax发送步骤过程详解
2019/07/25 Javascript
[03:07]2015国际邀请赛选手档案EHOME.rOtK 是什么让他落泪?
2015/07/31 DOTA
[02:44]完美大师赛主赛事淘汰赛第二日观众采访
2017/11/24 DOTA
paramiko模块安装和使用(远程登录服务器)
2014/01/27 Python
Python实现自动为照片添加日期并分类的方法
2017/09/30 Python
浅谈python str.format与制表符\t关于中文对齐的细节问题
2019/01/14 Python
利用python实现对web服务器的目录探测的方法
2019/02/26 Python
python判断一个对象是否可迭代的例子
2019/07/22 Python
Python 实现训练集、测试集随机划分
2020/01/08 Python
英语专业毕业生自荐信
2013/10/28 职场文书
团代会主持词
2014/04/02 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
销售会议开幕词
2015/01/28 职场文书
2015年国庆节活动总结
2015/03/23 职场文书
在校学生证明格式
2015/06/24 职场文书
公司管理建议书
2015/09/14 职场文书
MySQL笔记 —SQL运算符
2022/01/18 MySQL
Python读取和写入Excel数据
2022/04/20 Python