<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>搜索页面</title>
<style>
/* 全局样式重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Microsoft YaHei", sans-serif;
}
/* 页面整体布局 */
body {
background-color: #f5f5f5;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 20px;
}
/* 搜索容器样式 */
.search-container {
width: 100%;
max-width: 600px;
text-align: center;
}
/* 标题样式 */
.search-title {
font-size: 2.5rem;
color: #333;
margin-bottom: 30px;
font-weight: 600;
}
/* 搜索框区域样式 */
.search-box {
display: flex;
border: 1px solid #ddd;
border-radius: 30px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
background-color: #fff;
}
/* 搜索输入框样式 */
#search-input {
flex: 1;
padding: 15px 20px;
border: none;
outline: none;
font-size: 1rem;
color: #333;
}
/* 输入框占位符样式 */
#search-input::placeholder {
color: #999;
}
/* 搜索按钮样式 */
#search-btn {
padding: 0 25px;
background-color: #4285f4;
color: #fff;
border: none;
cursor: pointer;
font-size: 1rem;
transition: background-color 0.3s ease;
}
/* 按钮hover效果 */
#search-btn:hover {
background-color: #3367d6;
}
/* 响应式适配 - 小屏幕调整样式 */
@media (max-width: 480px) {
.search-title {
font-size: 1.8rem;
}
#search-input {
padding: 12px 15px;
}
#search-btn {
padding: 0 20px;
}
}
/* 搜索结果区域（初始隐藏） */
.search-result {
width: 100%;
max-width: 600px;
margin-top: 30px;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
display: none;
}
.result-title {
font-size: 1.2rem;
color: #333;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
.result-list {
list-style: none;
}
.result-item {
padding: 10px 0;
border-bottom: 1px solid #f5f5f5;
}
.result-item:last-child {
border-bottom: none;
}
.result-item a {
color: #1a0dab;
text-decoration: none;
font-size: 1rem;
}
.result-item a:hover {
text-decoration: underline;
}
.result-desc {
color: #545454;
font-size: 0.9rem;
margin-top: 5px;
}
</style>
</head>
<body>
<!-- 搜索容器 -->
<div class="search-container">
<h1 class="search-title">通用搜索</h1>
<div class="search-box">
<input type="text" id="search-input" placeholder="请输入要搜索的内容...">
<button id="search-btn">搜索</button>
</div>
</div>
<!-- 搜索结果区域 -->
<div class="search-result" id="search-result">
<h2 class="result-title">搜索结果：<span id="search-keyword"></span></h2>
<ul class="result-list" id="result-list">
<!-- 结果会通过JS动态生成 -->
</ul>
</div>
<script>
// 获取DOM元素
const searchInput = document.getElementById('search-input');
const searchBtn = document.getElementById('search-btn');
const searchResult = document.getElementById('search-result');
const searchKeyword = document.getElementById('search-keyword');
const resultList = document.getElementById('result-list');
// 模拟搜索数据（实际项目中可替换为接口请求）
const mockData = {
"Python教程": [
{ title: "Python基础教程 - 菜鸟教程", desc: "Python 是一种解释型、面向对象、动态数据类型的高级程序设计语言。" },
{ title: "Python官方文档", desc: "Python官方提供的完整教程和API参考。" },
{ title: "Python进阶学习指南", desc: "从入门到精通的Python进阶知识点总结。" }
],
"HTML教程": [
{ title: "HTML基础入门 - W3School", desc: "HTML 是用来描述网页的一种语言。" },
{ title: "HTML5新特性详解", desc: "HTML5新增的语义化标签、表单控件等特性介绍。" },
{ title: "响应式HTML布局实战", desc: "基于HTML和CSS实现响应式网页布局的方法。" }
],
"默认": [
{ title: "未找到相关结果", desc: "请尝试更换关键词重新搜索。" }
]
};
// 搜索功能函数
function handleSearch() {
// 获取输入的关键词并去除首尾空格
const keyword = searchInput.value.trim();
// 验证关键词是否为空
if (!keyword) {
alert('请输入搜索内容！');
return;
}
// 显示搜索结果区域
searchResult.style.display = 'block';
// 设置搜索关键词
searchKeyword.textContent = keyword;
// 清空之前的结果
resultList.innerHTML = '';
// 获取匹配的结果（无匹配则显示默认结果）
const results = mockData[keyword] || mockData["默认"];
// 生成结果列表
results.forEach(item => {
const li = document.createElement('li');
li.className = 'result-item';
li.innerHTML = `
<a href="javascript:void(0)">${item.title}</a>
<div class="result-desc">${item.desc}</div>
`;
resultList.appendChild(li);
});
// 输入框失焦
searchInput.blur();
}
// 绑定搜索按钮点击事件
searchBtn.addEventListener('click', handleSearch);
// 绑定回车键触发搜索
searchInput.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
handleSearch();
}
});
</script>
</body>
</html>
