記得，在上個項目中，遇到這樣一個需求，網站要求填寫郵箱的時候，還沒有填寫完，就會出現一系列下拉列表，幫助自動補全郵箱的功能。今天小編給給大家分享下我基于jquery是怎么實現此功能的！
功能簡述
•填寫郵箱名字，出現下拉列表，自動補全郵箱
•點擊上下按鍵，選取下拉列表郵箱
•按回車鍵，選中列表內容，隱藏下拉列表
•鼠標經過，下拉列表選項設置為高亮
•鼠標點擊，選中下拉列表選項，隱藏下拉列表
HTML
HTML代碼很簡單，我們就一個簡單的輸入框，然后一個ul標簽，在內部可以放好多li標簽。
<html><head><meta charset="utf-8"/><script src="js/jquery.min.js"></script><script src="js/main.js"></script><link href="css/style.css" rel="stylesheet"/></head><body><div class="content"><input type="text" name="email" id="email" placeholder="請輸入您的郵箱"/><ul class="list"></ul></div></body></html>
以上便是HTML代碼
CSS
在CSS中，定義也比較簡單，其中有一個 lilight 的 class，可以使背景變色，通過 remove 和 add 這個 class，我們可以輕松地實現下拉列表元素是否選中的區分。
CSS所有樣式如下
.content input{padding:5px 10px;width:200px;}ul.list{list-style:none;padding:0px;margin:0px;overflow:hidden;}ul.list li{border:1px solid #EEE;width:180px;padding:5px 10px;margin:0px;text-overflow:ellipsis; //溢出時變為省略overflow:hidden;}.lilight{background-color:#fafafa;}JS
我們引入 jQuery 來實現對元素的操作，實現了按鍵和鼠標監聽，代碼如下
$(function(){//聲明所有的電子郵件變量var mail=new Array("sina.com.cn","126.com","163.com","gmail.com","qq.com","vip.qq.com","hotmail.com","sohu.com","139.com","vip.sina.com","cuiqingcai.com");//生成一個個li，并加入到ul中for(var i=0;i<mail.length;i++){var liElement=$("<li class=/"autoli/"><span class=/"ex/"></span><span class=/"at/">@</span><span class=/"tail/">"+mail[i]+"</span></li>");liElement.appendTo("ul.list");}//首先讓list隱藏起來$("ul.list").hide();$("#email").keyup(function(event){//鍵入的內容不是上下箭頭和回車if(event.keyCode!=38&&event.keyCode!=40&&event.keyCode!=13){//如果輸入的值不是空或者不以空格開頭if($.trim($(this).val())!=""&& $.trim($(this).val()).match(/^@/)==null){$("ul.list").show();//如果當前有已經高亮的下拉選項卡，那么將其移除if($("ul.list li:visible").hasClass("lilight")){$("ul.list li").removeClass("lilight");}//如果還存在下拉選項卡，那么將其高亮if($("ul.list li:visible")){$("ul.list li:visible:eq(0)").addClass("lilight");}}else{//否則不進行顯示$("ul.list").hide();$("ul.list li").removeClass("lilight");}//輸入的內容還沒有包括@符號if($.trim($(this).val()).match(/.*@/)==null){$(".list li .ex").text($(this).val());}else{//輸入的符號已經包含了@var str = $(this).val();var strs = str.split("@");$(".list li .ex").text(strs[0]);if($(this).val().length>=strs[0].length+1){tail=str.substr(strs[0].length+1);$(".list li .tail").each(function(){//如果數組中的元素是以文本中的后綴開頭，那么就顯示，否則不顯示if(!($(this).text().match(tail)!=null&&$(this).text().indexOf(tail)==0)){//隱藏其他的li$(this).parent().hide();}else{//顯示所在的li$(this).parent().show();}});}}}//按了回車時，將當前選中的元素寫入到文本框中if(event.keyCode==13){$("#email").val($("ul.list li.lilight:visible").text());$("ul.list").hide();}});//監聽上下方向鍵$("#email").keydown(function(event){//下方向鍵按下了if(event.keyCode==40){if($("ul.list li").is(".lilight")){if($("ul.list li.lilight").nextAll().is("li:visible")){$("ul.list li.lilight").removeClass("lilight").next("li").addClass("lilight");}}}//下方向鍵按下了if(event.keyCode==38){if($("ul.list li").is(".lilight")){if($("ul.list li.lilight").prevAll().is("li:visible")){$("ul.list li.lilight").removeClass("lilight").prev("li").addClass("lilight");}}}});//當鼠標點擊某個下拉項時，選中該項，下拉列表隱藏$("ul.list li").click(function(){$("#email").val($(this).text());$("ul.list").hide();});//當鼠標劃過某個下拉項時，選中該項，下拉列表隱藏$("ul.list li").hover(function(){$("ul.list li").removeClass("lilight");$(this).addClass("lilight");});//當鼠標點擊其他位置，下拉列表隱藏$(document).click(function(){$("ul.list").hide();}); }); 總結
其實還有一個比較強大的插件，叫autocomplete，同樣可以實現下拉列表的自動補全，功能更加完善，如果大家有興趣可以去試一下。不過感覺最常用的就是郵箱自動補齊，而且直接用 jQuery 就可以比較方便地實現，所以博主就沒有使用autocomplete插件，而是自己寫了一下，一來練習一下，二來對這種功能的實現了解得更加透徹。
以上所述是小編給大家介紹的jQuery實現郵箱下拉列表自動補全功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
