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 编程引入命名空间的方法
Jun 29 Javascript
jqTransform form表单美化插件使用方法
Jul 05 Javascript
Jquery实现三层遍历删除功能代码
Apr 23 Javascript
JS防止用户多次提交的简单代码
Aug 01 Javascript
Node.js五大应用性能技巧小结(必须收藏)
Aug 09 Javascript
js实现各浏览器全屏代码实例
Jul 03 Javascript
php中and 和 &amp;&amp;出坑指南
Jul 13 Javascript
ndm:NPM的桌面GUI应用程序
Oct 15 Javascript
详解webpack4.x之搭建前端开发环境
Mar 28 Javascript
浅谈Webpack多页应用HMR卡住问题
Apr 24 Javascript
详解javascript中的Error对象
Apr 25 Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
原生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
中国的第一台收音机
2021/03/01 无线电
.htaccess文件保护实例讲解
2011/02/06 PHP
PHP中创建空文件的代码[file_put_contents vs touch]
2012/01/20 PHP
php去掉文件前几行的方法
2015/07/29 PHP
yii权限控制的方法(三种方法)
2015/12/28 PHP
php实现产品加入购物车功能(1)
2020/07/23 PHP
php微信开发之关注事件
2018/06/14 PHP
javascript图像处理—仿射变换深度理解
2013/01/16 Javascript
extjs_02_grid显示本地数据、显示跨域数据
2014/06/23 Javascript
JS运动框架之分享侧边栏动画实例
2015/03/03 Javascript
使用AngularJS 应用访问 Android 手机的图片库
2015/03/24 Javascript
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
ionic实现可滑动的tab选项卡切换效果
2020/04/15 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
2016/09/24 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
2017/11/09 Javascript
angular中如何绑定iframe中src的方法
2019/02/01 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
Vue.js组件使用props传递数据的方法
2019/10/19 Javascript
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
Vue-router中hash模式与history模式的区别详解
2020/12/15 Vue.js
[01:07:53]RNG vs VG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python绘制简单彩虹图
2018/11/19 Python
python实现手机销售管理系统
2019/03/19 Python
python利用dlib获取人脸的68个landmark
2019/11/27 Python
Python3查找列表中重复元素的个数的3种方法详解
2020/02/13 Python
如何利用python之wxpy模块玩转微信
2020/08/17 Python
国际知名军事风格休闲装品牌:Alpha Industries(阿尔法工业)
2017/05/24 全球购物
美国转售二手商品的电子商务平台:BLINQ
2018/12/13 全球购物
利达恒信公司.NET笔试题面试题
2016/03/05 面试题
酒店营销策划方案
2014/02/07 职场文书
汽车检测与维修专业求职信
2014/07/04 职场文书
考试没考好检讨书(精选篇)
2014/11/16 职场文书
学校元旦晚会开场白
2015/05/29 职场文书
团组织推荐意见
2015/06/05 职场文书
《我的伯父鲁迅先生》教学反思
2016/02/16 职场文书
vue/cli 配置动态代理无需重启服务的方法
2022/05/20 Vue.js