day42-Live User Filter(实时用户过滤器)

50 天学习 50 个项目 - HTMLCSS and JavaScript

day42-Live User Filter(实时用户过滤器)

效果

index.html

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Live User Filter</title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <!-- 容器 -->
    <div class="container">
        <header class="header">
            <h4 class="title">实时用户筛选</h4>
            <small class="subtitle">按名称和/或位置搜索</small>
            <input type="text" id="filter" placeholder="Search">
        </header>
        <!-- 结果 -->
        <ul id="result" class="user-list">
            <li>
                <h3>Loading...</h3>
            </li>
        </ul>
    </div>
    <script src="script.js"></script>
</body>

</html>

style.css

css 复制代码
/* 引入字体 */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {
    box-sizing: border-box;
}

body {
    background: url('https://source.unsplash.com/random') no-repeat top center/cover;
    font-family: 'Roboto', sans-serif;
    /* 子元素居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    margin: 0;
}

/* 容器 */
.container {
    border-radius: 5px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    width: 300px;
}

/* 标题 */
.title {
    margin: 0;
}

/* 副标题 */
.subtitle {
    display: inline-block;
    margin: 5px 0 20px;
    opacity: 0.8;
}

/* 头部 */
.header {
    background-color: #3e57db;
    color: #fff;
    padding: 30px 20px;
}

/* 搜索框 */
.header input {
    background-color: rgba(0, 0, 0, 0.3);
    border: 0;
    border-radius: 50px;
    color: #fff;
    font-size: 14px;
    padding: 10px 15px;
    width: 100%;
    /* 去除聚焦时的边框效果 */
    outline: none;
}

/* 结果 */
.user-list {
    background-color: #fff;
    /* 去除li的小圆点 */
    list-style-type: none;
    margin: 0;
    padding: 0;
    max-height: 400px;
    /* 当内容高度超过元素定义的高度时,就会出现垂直滚动条,允许用户滚动查看超出部分的内容 */
    overflow-y: auto;
}

.user-list li {
    display: flex;
    padding: 20px;
}

.user-list img {
    border-radius: 50%;
    /* 图片覆盖 */
    object-fit: cover;
    height: 50px;
    width: 50px;
}

.user-list .user-info {
    margin-left: 10px;
}

.user-list .user-info h4 {
    margin: 0 0 10px;
}

.user-list .user-info p {
    font-size: 12px;
}

/* 不是最后一个li,都需要添加底部边框 */
.user-list li:not(:last-of-type) {
    border-bottom: 1px solid #eee;
}

/* 隐藏li,用于js */
.user-list li.hide {
    display: none;
}

script.js

javascript 复制代码
// 重点 flex async await fetch input事件类型 https://randomuser.me/api?results=50 字符串的includes方法
// 1.获取元素节点
const result = document.getElementById('result')//结果
const filter = document.getElementById('filter')//搜索框
const listItems = []//展示的结果
// 初始化,获取所有列表信息
getData()
// 2.给搜索框绑定输入事件,实时进行筛选
filter.addEventListener('input', (e) => filterData(e.target.value))
// 异步获取所有列表信息
async function getData() {
    const res = await fetch('https://randomuser.me/api?results=50')

    const { results } = await res.json()
    // console.log(results);
    // 清除原来的列表信息防止影响本次的展示
    result.innerHTML = ''
    // 遍历,创建li用于展示
    results.forEach(user => {
        const li = document.createElement('li')

        listItems.push(li)

        li.innerHTML = `
            <img src="${user.picture.large}" alt="${user.name.first}">
            <div class="user-info">
                <h4>姓名:${user.name.first} ${user.name.last}</h4>
                <p>位于:${user.location.city}, ${user.location.country}</p>
            </div>
        `

        result.appendChild(li)
    })
}
// 函数过滤出
function filterData(searchTerm) {
    listItems.forEach(item => {
        if (item.innerText.toLowerCase().includes(searchTerm.toLowerCase())) {
            item.classList.remove('hide')
        } else {
            // 不包含,即不显示
            item.classList.add('hide')
        }
    })
}
相关推荐
计算机毕设定制辅导-无忧学长4 分钟前
从入门到精通:HTML 项目实战中的学习进度(一)
前端·学习·html
Microsoft Word4 分钟前
HTML简单介绍
前端·html
DataGear18 分钟前
DataGear 企业版 1.4.0 发布,数据可视化分析平台
javascript·信息可视化·数据分析·html·echarts·数据可视化
爱嘿嘿的小黑29 分钟前
docker 常用命令
前端
dangfulin31 分钟前
CSS——变换、过度与动画
前端·css
南屿欣风43 分钟前
解决 Gin Web 应用中 Air 热部署无效的问题
前端·gin
猿大师办公助手1 小时前
Web网页内嵌福昕OFD版式办公套件实现在线预览编辑PDF、OFD文档
前端·pdf·word
幼儿园技术家1 小时前
什么是RESTful 或 GraphQL?
前端
Lonwayne2 小时前
当编程语言有了人格
java·javascript·c++·python·php
echola_mendes2 小时前
LangChain 结构化输出:用 Pydantic + PydanticOutputParser 驯服 LLM 的“自由发挥”
服务器·前端·数据库·ai·langchain