热门标签搜索框_热门搜索标签代码-优快云博客

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>热门标签搜索框</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
font-family: 'Microsoft YaHei', Arial, sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 20px;
color: #333;
}
.container {
max-width: 800px;
margin: 50px auto;
padding: 30px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}
h1 {
color: #2c3e50;
text-align: center;
margin-bottom: 30px;
}
.search-container {
position: relative;
margin-bottom: 20px;
}
.search-input {
width: 100%;
padding: 15px;
border: 2px solid #3498db;
border-radius: 50px;
font-size: 16px;
outline: none;
transition: all 0.3s;
box-sizing: border-box;
}
.search-input:focus {
box-shadow: 0 0 10px rgba(52, 152, 219, 0.3);
}
.tags-container {
display: none;
position: absolute;
width: 100%;
max-height: 300px;
overflow-y: auto;
background: white;
border: 1px solid #ddd;
border-radius: 8px;
margin-top: 10px;
padding: 15px;
z-index: 100;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.tags-title {
font-weight: bold;
margin-bottom: 10px;
color: #7f8c8d;
font-size: 14px;
}
.tag {
display: inline-block;
padding: 8px 15px;
margin: 5px;
background-color: #f0f0f0;
border-radius: 20px;
color: #333;
font-size: 14px;
cursor: pointer;
transition: all 0.2s;
}
.tag:hover {
background-color: #3498db;
color: white;
transform: translateY(-2px);
}
.tag-popular {
background-color: #e3f2fd;
border-left: 3px solid #3498db;
}
.tag-hot {
background-color: #ffebee;
border-left: 3px solid #e74c3c;
}
.footer {
text-align: center;
margin-top: 40px;
color: #7f8c8d;
font-size: 14px;
}
.footer a {
color: #e74c3c;
text-decoration: none;
}
.footer a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<h1>热门标签搜索框</h1>

<div class="search-container">
<input type="text" class="search-input" id="searchInput" placeholder="点击搜索...">

<div class="tags-container" id="tagsContainer">
<div class="tags-title">热门搜索标签</div>
<div class="tag tag-hot" data-tag="jQuery教程">jQuery教程</div>
<div class="tag tag-popular" data-tag="JavaScript基础">JavaScript基础</div>
<div class="tag" data-tag="HTML5">HTML5</div>
<div class="tag tag-popular" data-tag="CSS3动画">CSS3动画</div>
<div class="tag tag-hot" data-tag="Vue.js">Vue.js</div>
<div class="tag" data-tag="React开发">React开发</div>
<div class="tag" data-tag="前端框架">前端框架</div>
<div class="tag tag-hot" data-tag="移动端适配">移动端适配</div>
<div class="tag" data-tag="响应式设计">响应式设计</div>
<div class="tag tag-popular" data-tag="ES6新特性">ES6新特性</div>
<div class="tag" data-tag="Node.js">Node.js</div>
<div class="tag" data-tag="Webpack配置">Webpack配置</div>
</div>
</div>

<div class="footer">

</div>
</div>

<script>
$(document).ready(function() {
const $searchInput = $('#searchInput');
const $tagsContainer = $('#tagsContainer');

// 点击搜索框显示标签
$searchInput.on('click', function(e) {
e.stopPropagation();
$tagsContainer.fadeIn(200);
});

// 点击标签填入搜索框
$('.tag').on('click', function() {
const tag = $(this).data('tag');
$searchInput.val(tag);
$tagsContainer.fadeOut(200);

// 这里可以添加搜索逻辑
console.log(' 搜索标签:', tag);
alert('您选择了: ' + tag + '\n(此处执行实际搜索功能)');
});

// 点击页面其他位置隐藏标签
$(document).on('click', function() {
$tagsContainer.fadeOut(200);
});

// 阻止标签容器内的点击事件冒泡
$tagsContainer.on('click', function(e) {
e.stopPropagation();
});

// 键盘事件处理
$searchInput.on('keyup', function(e) {
if (e.keyCode === 13) { // Enter键
const searchText = $(this).val();
if (searchText) {
console.log(' 执行搜索:', searchText);
alert('执行搜索: ' + searchText + '\n(此处执行实际搜索功能)');
}
}
});
});
</script>
</body>
</html>