jQuery 郵箱下拉列表自動補全

時間 2019-12-09

標籤 jquery 郵箱下拉列表自動補全欄目 JQuery 简体版

原文原文鏈接

綜述

我想你們必定見到過，在某個網站填寫郵箱的時候，尚未填寫完，就會出現一系列下拉列表，幫你自動補全郵箱的功能。如今咱們就用jQuery來實現一下。css

博主原創代碼，若有代碼寫的不完善的地方還望你們多多指教。html

功能簡述

填寫郵箱名字，出現下拉列表，自動補全郵箱
點擊上下按鍵，選取下拉列表郵箱
按回車鍵，選中列表內容，隱藏下拉列表
鼠標通過，下拉列表選項設置爲高亮
鼠標點擊，選中下拉列表選項，隱藏下拉列表

HTML

HTML代碼很簡單，咱們就一個簡單的輸入框，而後一個ul標籤，在內部能夠放好多li標籤。jquery

<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，咱們能夠輕鬆地實現下拉列表元素是否選中的區分。app

CSS全部樣式以下ide

.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插件，而是本身寫了一下，一來練習一下，二來對這種功能的實現瞭解得更加透徹。ui

你們也能夠嘗試下，但願小夥伴們有幫助，加油！this

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。