快捷導(dǎo)航

jquery css實(shí)現(xiàn)郵箱自動補(bǔ)全

更新時間：2016年11月14日 08:52:51 作者：碌碌無為是罪過

這篇文章主要為大家詳細(xì)介紹了jquery css實(shí)現(xiàn)郵箱自動補(bǔ)全功能,具有一定的參考價值，感興趣的小伙伴們可以參考一下

今天在公司做一個電子商務(wù)網(wǎng)站的注冊會員時，要求用戶在電子郵箱文本框中輸入時，給與熱點(diǎn)提示常用的電子郵箱，幫助用戶選擇，提高體驗(yàn)效果。下面是用Jquery+css實(shí)現(xiàn)的郵箱自動補(bǔ)全，供大家參考和學(xué)習(xí)。

HTML代碼：emailAutoComple.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <title>郵箱自動補(bǔ)全</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link type="text/css" rel="stylesheet" href="css/emailAutoComple.css">
  <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
  <script type="text/javascript" src="js/emailAutoComple.js"></script>
  <script type="text/javascript">
    $(function(){
    $.AutoComplete("#email");  //（要補(bǔ)全文本框的id）
    });
  </script>
 </head>
 
 <body>
  <form action="">
        姓名：<input type="text" name="userName" id="userName"/><br/>
        郵箱：<input type="text" name="email" id="email"/>
  </form>
 </body>
</html>

JS代碼：js/emailAutoComple.js（實(shí)現(xiàn)自動補(bǔ)全的關(guān)鍵代碼）

 jQuery.AutoComplete = function(selector){
  var elt = $(selector);
  var strHtml = '<div class="AutoComplete" id="AutoComplete">'+
        '    <ul class="AutoComplete_ul">'+
        '      <li hz="@163.com"></li>'+
        '      <li hz="@126.com"></li>'+
        '      <li hz="@139.com"></li>'+
        '      <li hz="@189.com"></li>'+
        '      <li hz="@qq.com"></li>'+
        '      <li hz="@vip.sina.com"></li>'+
        '      <li hz="@sina.cn"></li>'+
        '      <li hz="@sina.com"></li>'+
        '      <li hz="@sohu.com"></li>'+
        '      <li hz="@hotmail.com"></li>'+
        '      <li hz="@gmail.com"></li>'+
        '      <li hz="@wo.com.cn"></li>'+
        '      <li hz="@21cn.com"></li>'+
        '      <li hz="@aliyun.com"></li>'+
        '      <li hz="@yahoo.com"></li>'+
        '      <li hz="@foxmail.com"></li>'+
        '    </ul>'+
        '  </div>';
  //將div追加到body上
  $('body').append(strHtml);     
  var autoComplete,autoLi;
  autoComplete = $('#AutoComplete');    
  autoComplete.data('elt',elt);
  autoLi = autoComplete.find('li');
  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();
  });
  //用戶名補(bǔ)全+翻動
  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){ //確定
      autoLi.filter('.hover').mousedown();
    }
  }).focus(function(){
    autoComplete.data('elt',$(this));
  }).blur(function(){
    autoComplete.hide();
  });
};

CSS代碼：css/emailAutoComple.css

#AutoComplete{background:#fff;border:1px solid #4190db;display:none;width:150px;}
#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;}

效果圖：

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

深入理解jQuery.data() 的實(shí)現(xiàn)方式
本篇文章主要介紹了jQuery.data() 的實(shí)現(xiàn)方式，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-11-11
jquery 表格的增行刪行實(shí)現(xiàn)思路
表格增行刪行一般情況下都是通過修改html結(jié)構(gòu)實(shí)現(xiàn)的，接下來為大家介紹下如何使用jquery實(shí)現(xiàn)表格增行刪行，感興趣的各位可不要錯過了哈
2013-03-03
簡單談?wù)刯Query(function(){})與(function(){})(jQuery)
這篇文章主要簡單介紹了jQuery(function(){})與(function(){})(jQuery)的區(qū)別,需要的朋友可以參考下
2014-12-12
asp.net下使用jquery 的ajax+WebService+json 實(shí)現(xiàn)無刷新取后臺值的實(shí)現(xiàn)代碼
asp.net下使用jquery 的ajax+WebService+json 實(shí)現(xiàn)無刷新取后臺值的實(shí)現(xiàn)代碼，比頁面刷新更好，用戶體驗(yàn)更好，需要的朋友可以參考下。
2010-09-09
jQuery之網(wǎng)頁換膚實(shí)現(xiàn)代碼
用jQuery做網(wǎng)頁換膚確實(shí)是很一個很巧妙，很好的選擇，這是本人在學(xué)習(xí)jQuery中學(xué)的知識，感覺很有用，寫了下來，希望大家有更好的方法或者代碼不足的地方請諒解，本人也是初學(xué)者啊，希望大家互相勉勵互相學(xué)習(xí)。
2011-04-04
JQuery綁定事件四種實(shí)現(xiàn)方法解析
這篇文章主要介紹了JQuery綁定事件四種實(shí)現(xiàn)方法解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2020-12-12
jquery實(shí)現(xiàn)textarea輸入框限制字?jǐn)?shù)的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)textarea輸入框限制字?jǐn)?shù)的方法,通過keyup事件實(shí)時讀取textarea輸入框的字?jǐn)?shù)來實(shí)現(xiàn)這一功能,非常具有實(shí)用價值,需要的朋友可以參考下
2015-01-01
這篇文章主要介紹了jquery實(shí)現(xiàn)簡單實(shí)用的打分程序,涉及jquery節(jié)點(diǎn)遍歷與樣式操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-07-07