js案例-通讯录

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'
    }
  }
})

 

posted @ 2022-05-14 10:25  守鹤  阅读(172)  评论(0)    收藏  举报