本文實(shí)例為大家分享了js實(shí)現(xiàn)百度搜索框展示效果的具體代碼，供大家參考，具體內(nèi)容如下
具體代碼如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; font-size:14px; } input{ display:block; outline:none; } a{ display:block; text-decoration: none; color:#000; } a:hover,a:active,a:target{ text-decoration: none; color:#000; } ul,li{ list-style:none; } .box{ position:absolute; top:20px; left:50%; margin-left:-250px; width:500px; } .box input{ width:300px; height:35px; padding:0 10px; border:1px solid #008000; } .box ul{ display:none; position:relative; top:-1px; border:1px solid #008000; } .box ul li,.box ul li a{ height:35px; line-height:35px; } .box ul li a{ padding:0 10px; } .box ul li a:hover{ background:#ccc; } </style></head><body> <div class='box'> <input type="text" id='searchInp'> <ul id='searchList'> <li><a href="javascript:;">111111111111</a></li> <li><a href="javascript:;">2222222222</a></li> <li><a href="javascript:;">33333333333</a></li> <li><a href="javascript:;">444444444444</a></li> <li><a href="javascript:;">5555555555555</a></li> </ul> </div> <script> //顯示 /* 1、文本框獲取焦點(diǎn)，并且文本框中有內(nèi)容的時候 2、在文本框中操作內(nèi)容（新輸入/刪除），如果內(nèi)容沒有清空，我們就顯示，否則就隱藏 */ //隱藏 /* 1、點(diǎn)擊頁面中其余的位置（除了點(diǎn)擊文本框和searchList里面的每一行）都隱藏； 2、點(diǎn)擊searchList中的列表隱藏，但是還要把列表中的內(nèi)容放到文本框中 */ //不管是獲取焦點(diǎn)onfocus,還是在里面編輯內(nèi)容onkeyup,都是有內(nèi)容顯示，沒內(nèi)容隱藏 var searchInp = document.getElementById('searchInp'),searchList = document.getElementById('searchList'); searchInp.onkeyup = searchInp.onfocus = function(){ var val = this.value.replace(/(^ +| +$)/g,'')//獲取文本框中的內(nèi)容，并且去除它的首尾空格 searchList.style.display = val.length > 0 ? "block" : "none"; } document.body.onclick = function(e){ e = e || window.event; e.target = e.target || e.srcElement; //如果事件源是#searchList下的a標(biāo)簽,我們讓searchList隱藏，并且把當(dāng)前點(diǎn)擊這個a中的內(nèi)容放在文本框中 if(e.target.tagName.toLowerCase()==="a" && e.target.parentNode.parentNode.id==="searchList"){ searchList.style.display = "none"; searchInp.value = e.target.innerHTML; return; } //如果事件源是文本框還需要單獨(dú)的處理 // if(e.target.id === "searchInp"){ // return; // } searchList.style.display = "none"; } //我們可以阻止一個容器中某些特殊性的元素，讓其不在委托的范圍內(nèi):我們只需要把這些不需要委托的阻止冒泡傳播即可 searchInp.onclick = function(e){ e = e || window.event; e.stopPropagation ? e.stopPropagation() : e.cancelBubble = "true"; } </script></body></html>
新聞熱點(diǎn)
疑難解答
圖片精選
