js案例-通訊錄
阿新 • • 發佈：2022-05-14
HTML部分
從 bootcdn 上匯入一個樣式檔案，然後根據這個樣式檔案來搭建頁面結構。頁面由一個 div 包裹，類名是 container，然後裡面有一個 h1 類名是 center-align。h1 下面有一個 input 和 一個 ul，類名是 collection with-header。裡面的 li 就是通訊錄裡的內容，標題 li 的類名是 collection-header，內容 li 的類名是 collection-item。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href="https://cdn.bootcdn.net/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css" rel="stylesheet"> </head> <body> <div class="container"> <h1 class="center-align">我的通訊錄</h1> <input type="text" id="ipt" placeholder="搜尋姓名"> <ul id="names" class="collection with-header"> <!-- A --> <li class="collection-header"> <h5>A</h5> </li> <li class="collection-item"> <a href="#">A1</a> </li> <li class="collection-item"> <a href="#">A2</a> </li> <li class="collection-item"> <a href="#">A3</a> </li> <li class="collection-item"> <a href="#">A4</a> </li> <!-- B --> <li class="collection-header"> <h5>B</h5> </li> <li class="collection-item"> <a href="#">B1</a> </li> <li class="collection-item"> <a href="#">B2</a> </li> <li class="collection-item"> <a href="#">B3</a> </li> <li class="collection-item"> <a href="#">B4</a> </li> <!-- C --> <li class="collection-header"> <h5>C</h5> </li> <li class="collection-item"> <a href="#">C1</a> </li> <li class="collection-item"> <a href="#">C2</a> </li> <li class="collection-item"> <a href="#">C3</a> </li> <li class="collection-item"> <a href="#">C4</a> </li> </ul> </div> </body> <script src="./index.js"></script> </html>
JS部分
先獲取 input，然後為 input 新增鍵盤抬起事件。在事件裡先獲取輸入的內容，並且轉成大寫。然後獲取 ul 和類名是 collection-item 的 li。迴圈這個 li，在裡面獲取每個 li 下面的 a。然後判斷 輸入的內容能否在 a 的內容裡找到，如果找到將那個 li 顯示，如果沒找到就將那個 li 隱藏。
let ipt = document.querySelector('#ipt')
ipt.addEventListener('keyup', () => {
let iptVal = ipt.value.toUpperCase()
let ul = document.querySelector('#names')
let li = ul.querySelectorAll('li.collection-item')
for (let i = 0; i < li.length; i++) {
let a = li[i].children[0]
if (a.innerHTML.toUpperCase().indexOf(iptVal) != -1) {
li[i].style.display = 'block'
} else {
li[i].style.display = 'none'
}
}
})