制作時(shí)間：13:30 - 15:45
平常在網(wǎng)站登錄/注冊時(shí)，填寫郵箱或用戶名時(shí)跪呈，都會有下拉的提示取逾，直接點(diǎn)擊你想要的就可以了砾隅。
效果圖
html代碼：
<body>
<div id="login">
<div class="detail">
<input type="text" id="input1" maxlength="128" placeholder="郵箱/會員帳號/手機(jī)號" autocomplete="off" name="loginname">
</div>
<div class="detail">
<input type="password" maxlength="24" placeholder="請輸入密碼">
</div>
<ul id="suggest">
<li class="note">請選擇郵箱類型</li>
<li email="" class="item"></li>
<li email="@sina.com" class="item">@sina.com</li>
<li email="@163.com" class="item">@163.com</li>
<li email="@qq.com" class="item">@qq.com</li>
<li email="@126.com" class="item">@126.com</li>
<li email="@vip.sina.com" class="item">@vip.sina.com</li>
<li email="@sina.cn" class="item">@sina.cn</li>
<li email="@hotmail.com" class="item">@hotmail.com</li>
<li email="@gmail.com" class="item">@gmail.com</li>
<li email="@sohu.com" class="item">@sohu.com</li>
<li email="@yahoo.cn" class="item">@yahoo.cn</li>
<li email="@139.com" class="item">@139.com</li>
<li email="@wo.com.cn" class="item">@wo.com.cn</li>
<li email="@189.cn" class="item">@189.cn</li>
</ul>
</div>
</body>
Ul元素
實(shí)現(xiàn)步驟：
同樣是用面向?qū)ο蟮乃枷刖帉懘a究反。
1. 建立框架
window.onload = function(){
var s1 = new Suggest();
}
function Suggest(){
this.oInput = document.getElementById("input1");
this.oUl = document.getElementById("suggest");
this.aLi = this.oUl.getElementsByTagName("li");
}
Suggest.prototype = {
....
}
2. 點(diǎn)擊 input 框讓 ul 元素顯示出來,
創(chuàng)建四個(gè)方法：
init
toChange
showUl
toBlur
showUl: function(){
this.oUl.style.display = "block";
},
toBlur: function(){
var This = this;
this.oInput.onblur = function(){
This.oUl.style.display = "none";
}
},
4. 當(dāng)有輸入時(shí)精耐，下拉提示也同步顯示數(shù)據(jù)
通過循環(huán)將 ul 中的每個(gè) li元素的值改成手動輸入的加上@后面下拉菜單上的值琅锻。
var value = this.oInput.value;
for(var i=1; i<this.aLi.length; i++){
var oEmail = this.aLi[i].getAttribute("email");
if(!oEmail){
this.aLi[i].innerHTML = value;
}else{
this.aLi[i].innerHTML = value+oEmail;
}
}
5. 當(dāng)輸入@后的匹配情況處理
6. 添加交互效果恼蓬。
默認(rèn)選中第一個(gè)。
給 li 元素添加onmouseover樣式小槐。
sel: function(inow){
var This = this;
this.item();
if(this.oInput.value == ''){
this.aLi[inow].className = "item";
}
else{
this.aLi[inow].className = "active";
}
for(var i=1; i<this.aLi.length; i++){
this.aLi[i].onmouseover = function(){
This.item();
this.className = "active";
}
}
其中的item方法.因?yàn)樾枰啻问褂煤稍詥为?dú)編寫一個(gè)方法。
item: function(){
for(var i=1; i<this.aLi.length; i++){
this.aLi[i].className = "item";
}
}
7. 添加按鍵效果拄显。
（1）給每個(gè)li添加onmousedown事件案站，實(shí)現(xiàn)點(diǎn)擊選中效果。
this.aLi[i].onmousedown = function(){
This.oInput.value = this.innerHTML;
}
（2）上下鍵控制移動承边。
（3）Enter鍵也可以選中。
輸入框下拉提示效果結(jié)束
不積跬步無以至千里
