50个前端实战项目之04：隐藏的搜索小组件

大家好，我是宝哥。

今天讲50个前端实战项目之04：隐藏的搜索小组件。

源码下载地址

https://github.com/bradtraversy/50projects50days/tree/master/hidden-search

前端实战项目系列正在更新：04/50

01：可展开卡片
02：进度条
03：旋转导航动画
04：隐藏的搜索小组件

项目介绍

本项目演示了一个简洁实用的隐藏式搜索小部件。点击搜索按钮后，搜索栏会展开，并输入框自动获得焦点，方便用户输入搜索内容。

效果预览

在线预览(文末点击原文链接可直达）：

https://qdkfweb.cn/50projects50days/hidden-search/

实现方法

HTML 结构中定义搜索栏的布局，包括输入框和按钮。
CSS 样式定义搜索栏的初始外观、展开后的外观以及按钮的移动效果。
JavaScript 代码监听按钮的点击事件，并根据 active 类的状态控制搜索栏的展开/收起，并设置输入框的焦点。

核心代码

HTML 结构

.search 容器包含搜索栏的输入框和按钮。
.input 输入框用于输入搜索内容。
.btn 按钮用于展开或收起搜索栏。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" /><link rel="stylesheet" href="style.css" /><title>Hidden Search</title></head><body><div class="search"><input type="text" class="input" placeholder="Search..."><button class="btn"><i class="fas fa-search"></i></button></div><script src="script.js"></script></body>
</html>

CSS 样式

.search 的 position: relative 属性使其可以定位子元素。
.input 和 .btn 的样式定义了初始外观和大小。
.search.active .input 和 .search.active .btn 的伪类控制搜索栏展开后的样式变化。

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');* {box-sizing: border-box;
}body {background-image: linear-gradient(90deg, #7d5fff, #7158e2);font-family: 'Roboto', sans-serif;display: flex;align-items: center;justify-content: center;height: 100vh;overflow: hidden;margin: 0;
}.search {position: relative;height: 50px;
}.search .input {background-color: #fff;border: 0;font-size: 18px;padding: 15px;height: 50px;width: 50px;transition: width 0.3s ease;
}.btn {background-color: #fff;border: 0;cursor: pointer;font-size: 24px;position: absolute;top: 0;left: 0;height: 50px;width: 50px;transition: transform 0.3s ease;
}.btn:focus,
.input:focus {outline: none;
}.search.active .input {width: 200px;
}.search.active .btn {transform: translateX(198px);
}

JavaScript 代码

获取搜索栏、按钮和输入框的 DOM 元素引用。
按钮的点击事件处理程序:
- 切换 .search 元素的 active 类，控制搜索栏的展开/收起。
- 搜索栏展开时，自动将焦点移至输入框。

const search = document.querySelector('.search')
const btn = document.querySelector('.btn')
const input = document.querySelector('.input')btn.addEventListener('click', () => {search.classList.toggle('active')input.focus()
})