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

更新时间：2016年09月20日 14:19:02 作者：朱羽佳

这篇文章主要介绍了jQuery实现输入框邮箱内容自动补全与上下翻动显示效果,涉及jquery.autoComplete.js插件的使用,可实现输入框内容自动补全的功能,附带了完整的demo源码供读者下载参考,需要的朋友可以参考下

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

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

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相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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

您可能感兴趣的文章:

jQuery实现嵌套选项卡功能
这篇文章主要为大家详细介绍了jQuery实现嵌套选项卡功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
浅析Bootstrip的select控件绑定数据的问题
这篇文章主要介绍了浅析Bootstrip的select控件绑定数据的问题的相关资料，小编认为非常具有参考价值，感兴趣的朋友一起看下吧
2016-05-05
两个多选select(multiple左右)添加、删除选项和取值实例
这篇文章主要介绍了两个多选select(multiple左右)添加、删除选项和取值实例,使用jquery实现,需要的朋友可以参考下
2014-05-05
jQuery 处理网页内容的实现代码
改变页面内容应该算是Javascript最常用的功能，这包括更改已经存在的页面元素或者添加新的HTML元素。
2010-02-02
Jquery 绑定时间实现代码
jquery 显示本地时间/ 带日期、星期/ UTC，需要的朋友可以参考下。
2011-05-05
jQuery学习笔记之总体架构
jQuery是一个兼容多浏览器的javascript框架，核心理念是write less,do more(写得更少,做得更多)。如今，jQuery已经成为最流行的javascript框架，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。那么作为一个前端设计师，怎么可能不来深入了解下jQuery呢，首先我们从他的总体构架开始吧
2014-06-06
jquery插件unobtrusive实现片段式加载
本文给大家分享的是使用jquery插件unobtrusive实现片段式加载，效果非常不错，有需要的小伙伴可以参考下。
2015-06-06
jquery 操作表格实现代码(多种操作打包)
最近做东西需要对表格进行操作，用到的动作包括:添加一行数据、删除一行数据、上下移动数据，网上找了很多，但是不能完全满足我的需求，自己琢磨了下，搞了个这个东东
2011-03-03
jQuery实现炫酷的鼠标轨迹特效
本文给大家分享的是一段jQuery实现炫酷的鼠标轨迹的特效代码，希望小伙伴们能够喜欢。
2015-02-02
jQuery 自定义函数写法分享
jQuery 自定义函数写法分享，需要的朋友可以参考下
2012-03-03

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具