搜索 · Javascript核心基礎

[toc] ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin:0; padding:0; } 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; } html,body{ width:100%; height:100%; border-top:1px solid transparent; } .box{ margin:20px auto; width:500px; } .box input{ padding:0 10px; width:300px; height:35px; 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="searchInput"> <ul id="searchList"> <li><a href="javascript:;">ahhh-front</a></li> <li><a href="javscript:;">ahhh-nodejs</a></li> <li><a href="javscript:;">ahhh-html5</a></li> <li><a href="javscript:;">ahhh-css3</a></li> <li><a href="javscript:;">ahhh-who says</a></li> </ul> </div> <script> //什么時候顯示: //1)文本框獲取焦點，并且文本框中有內容的時候 ///2)在文本框操作內容的的時候（新輸入/刪除），如果內容沒有清空，我們就顯示，否則就隱藏 //->隱藏 //1)點擊頁面中其余的位置（除了文本框和searchList里面的每一行）都隱藏 //2)點擊searchList中的列表隱藏，但是還要把列表中的內容放到文本框中 //->不管是獲取焦點onfocus，還是再里面編輯內容onkeyup，都是有內容顯示，沒內容隱藏 var searchInput = document.getElementById("searchInput") ,searchList = document.getElementById("searchList"); searchInput.onfocus = searchInput.onkeyup = function(e){ console.log(1); var val = this.value.replace(/(^ +| +$)/g,""); //獲取文本框中的內容，并且去除它的首尾空格 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，我們讓searchList隱藏，并且把當前點擊這個a中的內容放到文本框中 if(e.target.tagName.toLowerCase()==='a'&&e.target.parentNode.parentNode.id==="searchList"){ searchInput.value = e.target.innerHTML; searchList.style.display = "none"; return; } // if(e.target.id === 'searchInput'){ // return; // } //或則在input中阻止冒泡 searchList.style.display = "none"; } //->我們可以阻止一個容器中某些特殊性的元素，讓其不再委托的范圍內 searchInput.onclick = function(e){ e = e || window.event; e.stopPropagation?e.stopPropagation():e.cancelBubble = true; } </script> </body> </html> ```