下拉菜单搜索功能

下拉菜单搜索功能实现

原创已于 2025-06-27 14:13:36 修改 · 622 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

于 2025-05-23 17:48:28 首次发布

<!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>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
}

.search-container {
position: relative;
width: 300px;
margin: 50px auto;
}

#search-input {
width: 100%;
padding: 10px 15px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}

#search-results {
position: absolute;
width: 100%;
max-height: 300px;
overflow-y: auto;
border: 1px solid #ddd;
border-top: none;
border-radius: 0 0 4px 4px;
background-color: white;
display: none;
z-index: 1000;
}

.result-item {
padding: 10px 15px;
cursor: pointer;
border-bottom: 1px solid #eee;
}

.result-item:hover {
background-color: #f0f0f0;
}

.result-item:last-child {
border-bottom: none;
}

.highlight {
color: #1a73e8;
font-weight: bold;
}

.footer {
margin-top: 30px;
text-align: center;
color: #666;
font-size: 14px;
}

/* 插入的网址样式 */
.website-link {
color: #1a73e8;
text-decoration: none;
}

.website-link:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="search-container">
<input type="text" id="search-input" placeholder="搜索...">
<div id="search-results"></div>
</div>

<div class="footer">

</div>

<script>
// 示例数据 - 可以替换为实际的数据源
const data = [
{ id: 1, name: "Apple iPhone 13" },
{ id: 2, name: "Samsung Galaxy S22" },
{ id: 3, name: "Google Pixel 6" },
{ id: 4, name: "OnePlus 10 Pro" },
{ id: 5, name: "Xiaomi 12" },
{ id: 6, name: "Huawei P50" },
{ id: 7, name: "Sony Xperia 1 III" },
{ id: 8, name: "Realme GT 2" },
{ id: 9, name: "Oppo Find X5" },
{ id: 10, name: "Vivo X70 Pro" }
];

const searchInput = document.getElementById('search-input');
const searchResults = document.getElementById('search-results');

// 监听输入事件
searchInput.addEventListener('input', function(e) {
const query = e.target.value.trim().toLowerCase();

if (query.length === 0) {
searchResults.style.display = 'none';
return;
}

// 过滤匹配项
const filtered = data.filter(item =>
item.name.toLowerCase().includes(query)
);

displayResults(filtered, query);
});

// 显示结果
function displayResults(results, query) {
if (results.length === 0) {
searchResults.innerHTML = '<div class="result-item">没有找到匹配的结果</div>';
searchResults.style.display = 'block';
return;
}

searchResults.innerHTML = '';

results.forEach(item => {
const div = document.createElement('div');
div.className = 'result-item';

// 高亮匹配的文本
const index = item.name.toLowerCase().indexOf(query);
if (index >= 0) {
const before = item.name.substring(0, index);
const match = item.name.substring(index, index + query.length);
const after = item.name.substring(index + query.length);

div.innerHTML = `${before}<span class="highlight">${match}</span>${after}`;
} else {
div.textContent = item.name;
}

div.addEventListener('click', function() {
searchInput.value = item.name;
searchResults.style.display = 'none';
// 这里可以添加点击后的操作，比如跳转到详情页
alert(`您选择了: ${item.name}`);
});

searchResults.appendChild(div);
});

searchResults.style.display = 'block';
}

// 点击页面其他位置关闭下拉菜单
document.addEventListener('click', function(e) {
if (e.target !== searchInput) {
searchResults.style.display = 'none';
}
});
</script>
</body>
</html>