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 相关文章推荐
javascript firefox兼容ie的dom方法脚本
May 18 Javascript
js获取某月的最后一天日期的简单实例
Jun 22 Javascript
Javascript 实现的数独解题算法网页实例
Oct 15 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
May 14 Javascript
基于javascript实现listbox左右移动
Jan 29 Javascript
jsp 网站引入外部css或者js失效问题解决
Oct 31 Javascript
Vue2.x中的父组件传递数据至子组件的方法
May 01 Javascript
JS删除数组里的某个元素方法
Feb 03 Javascript
vue配置接口域名方法总结
May 12 Javascript
vue 翻页组件vue-flip-page效果
Feb 05 Javascript
JavaScript进阶(一)变量声明提升实例分析
May 09 Javascript
JavaScript中如何调用Java方法
Sep 16 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生成二维码的两种方法(带logo图像)
2014/03/14 PHP
单台服务器的PHP进程之间实现共享内存的方法
2014/06/13 PHP
php实现插入数组但不影响原有顺序的方法
2015/03/27 PHP
Apache PHP MySql安装配置图文教程
2016/08/27 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
图片格式的JavaScript和CSS速查手册
2007/08/20 Javascript
JavaScript实现的一个倒计时的类
2015/03/12 Javascript
详解JavaScript中数组的相关知识
2015/07/29 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
JavaScript性能优化之小知识总结
2015/11/20 Javascript
AngularJS constant和value区别详解
2017/02/28 Javascript
详解nodejs中的process进程
2017/03/19 NodeJs
Angular2使用Angular CLI快速搭建工程(一)
2017/05/21 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
JavaScript 正则命名分组【推荐】
2018/06/07 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
2020/01/16 Javascript
vue中destroyed方法的使用说明
2020/07/21 Javascript
[01:05:56]2018DOTA2亚洲邀请赛3月29日 小组赛A组 Newbee VS VG
2018/03/30 DOTA
跟老齐学Python之正规地说一句话
2014/09/28 Python
python读取文本绘制动态速度曲线
2018/06/21 Python
python将一个英文语句以单词为单位逆序排放的方法
2018/12/20 Python
Python画图高斯分布的示例
2019/07/10 Python
python speech模块的使用方法
2020/09/09 Python
scrapy-redis分布式爬虫的搭建过程(理论篇)
2020/09/29 Python
adidas旗下高尔夫装备供应商:TaylorMade Golf(泰勒梅高尔夫)
2016/08/28 全球购物
英国香水店:The Perfume Shop
2017/03/27 全球购物
获取邓白氏信用报告:Dun & Bradstreet
2019/01/22 全球购物
int和Integer有什么区别
2013/05/25 面试题
搞笑的获奖感言
2014/08/16 职场文书
2014年底个人工作总结
2015/03/10 职场文书
雷锋电影观后感
2015/06/10 职场文书
阳光体育运动标语口号
2015/12/26 职场文书
详解缓存穿透击穿雪崩解决方案
2021/05/28 Redis
MySQL配置主从服务器(一主多从)
2021/08/07 MySQL
解决MySQL添加新用户-ERROR 1045 (28000)的问题
2022/03/03 MySQL
在 Python 中利用 Pool 进行多线程
2022/04/24 Python