238 lines
11 KiB
HTML
238 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>带搜索功能的下拉选择框</title>
|
|
<!-- 引入 Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<!-- 引入 Font Awesome -->
|
|
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
|
|
|
<!-- 配置 Tailwind 自定义颜色 -->
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#3B82F6',
|
|
secondary: '#64748B',
|
|
neutral: '#F1F5F9',
|
|
},
|
|
fontFamily: {
|
|
inter: ['Inter', 'sans-serif'],
|
|
},
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<!-- 自定义工具类 -->
|
|
<style type="text/tailwindcss">
|
|
@layer utilities {
|
|
.content-auto {
|
|
content-visibility: auto;
|
|
}
|
|
.dropdown-shadow {
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
|
}
|
|
.transition-custom {
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50 min-h-screen font-inter text-gray-800">
|
|
<div class="container mx-auto px-4 py-16 max-w-2xl">
|
|
<h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-900 mb-8 text-center">带搜索功能的下拉选择框</h1>
|
|
|
|
<div class="bg-white rounded-xl shadow-lg p-8">
|
|
<div class="mb-8">
|
|
<label for="searchSelect" class="block text-sm font-medium text-gray-700 mb-2">请选择城市</label>
|
|
<!-- 搜索选择框容器 -->
|
|
<div class="relative" id="searchSelectContainer">
|
|
<!-- 选择框主体 -->
|
|
<div class="relative">
|
|
<input
|
|
type="text"
|
|
id="searchSelect"
|
|
class="w-full pl-4 pr-10 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/30 focus:border-primary outline-none transition-all text-sm"
|
|
placeholder="输入城市名称搜索..."
|
|
readonly
|
|
onclick="toggleDropdown()"
|
|
>
|
|
<span class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 transition-transform duration-200" id="arrowIcon">
|
|
<i class="fa fa-chevron-down"></i>
|
|
</span>
|
|
</div>
|
|
|
|
<!-- 下拉内容 -->
|
|
<div id="dropdownContent" class="absolute z-10 mt-1 w-full bg-white rounded-lg dropdown-shadow overflow-hidden hidden">
|
|
<!-- 搜索输入框 -->
|
|
<div class="p-2 border-b border-gray-100">
|
|
<input
|
|
type="text"
|
|
id="searchInput"
|
|
class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-1 focus:ring-primary focus:border-primary outline-none text-sm"
|
|
placeholder="搜索城市..."
|
|
oninput="filterOptions()"
|
|
autofocus
|
|
>
|
|
</div>
|
|
|
|
<!-- 选项列表 -->
|
|
<div id="optionsList" class="max-h-60 overflow-y-auto">
|
|
<ul>
|
|
<li class="option px-4 py-2.5 hover:bg-neutral cursor-pointer text-sm transition-custom" data-value="beijing">北京</li>
|
|
<li class="option px-4 py-2.5 hover:bg-neutral cursor-pointer text-sm transition-custom" data-value="shanghai">上海</li>
|
|
<li class="option px-4 py-2.5 hover:bg-neutral cursor-pointer text-sm transition-custom" data-value="guangzhou">广州</li>
|
|
<li class="option px-4 py-2.5 hover:bg-neutral cursor-pointer text-sm transition-custom" data-value="shenzhen">深圳</li>
|
|
<li class="option px-4 py-2.5 hover:bg-neutral cursor-pointer text-sm transition-custom" data-value="hangzhou">杭州</li>
|
|
<li class="option px-4 py-2.5 hover:bg-neutral cursor-pointer text-sm transition-custom" data-value="nanjing">南京</li>
|
|
<li class="option px-4 py-2.5 hover:bg-neutral cursor-pointer text-sm transition-custom" data-value="chengdu">成都</li>
|
|
<li class="option px-4 py-2.5 hover:bg-neutral cursor-pointer text-sm transition-custom" data-value="chongqing">重庆</li>
|
|
<li class="option px-4 py-2.5 hover:bg-neutral cursor-pointer text-sm transition-custom" data-value="wuhan">武汉</li>
|
|
<li class="option px-4 py-2.5 hover:bg-neutral cursor-pointer text-sm transition-custom" data-value="xian">西安</li>
|
|
<li class="option px-4 py-2.5 hover:bg-neutral cursor-pointer text-sm transition-custom" data-value="suzhou">苏州</li>
|
|
<li class="option px-4 py-2.5 hover:bg-neutral cursor-pointer text-sm transition-custom" data-value="tianjin">天津</li>
|
|
<li class="option px-4 py-2.5 hover:bg-neutral cursor-pointer text-sm transition-custom" data-value="qingdao">青岛</li>
|
|
<li class="option px-4 py-2.5 hover:bg-neutral cursor-pointer text-sm transition-custom" data-value="xiamen">厦门</li>
|
|
<li class="option px-4 py-2.5 hover:bg-neutral cursor-pointer text-sm transition-custom" data-value="sanya">三亚</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- 无结果提示 -->
|
|
<div id="noResult" class="px-4 py-4 text-center text-gray-500 text-sm hidden">
|
|
没有找到匹配的城市
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 选择结果显示 -->
|
|
<div id="selectedResult" class="mt-4 text-sm text-gray-600 hidden">
|
|
<p>你选择的城市是：<span id="selectedValue" class="font-medium text-primary"></span></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<p class="text-gray-500 text-sm">点击选择框，开始输入城市名称进行搜索</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 控制下拉框显示/隐藏
|
|
function toggleDropdown() {
|
|
const dropdownContent = document.getElementById('dropdownContent');
|
|
const arrowIcon = document.getElementById('arrowIcon');
|
|
|
|
if (dropdownContent.classList.contains('hidden')) {
|
|
dropdownContent.classList.remove('hidden');
|
|
arrowIcon.classList.add('rotate-180');
|
|
document.getElementById('searchInput').focus();
|
|
// 点击外部关闭下拉框
|
|
document.addEventListener('click', handleOutsideClick);
|
|
} else {
|
|
closeDropdown();
|
|
}
|
|
}
|
|
|
|
// 关闭下拉框
|
|
function closeDropdown() {
|
|
const dropdownContent = document.getElementById('dropdownContent');
|
|
const arrowIcon = document.getElementById('arrowIcon');
|
|
|
|
dropdownContent.classList.add('hidden');
|
|
arrowIcon.classList.remove('rotate-180');
|
|
document.removeEventListener('click', handleOutsideClick);
|
|
}
|
|
|
|
// 点击外部关闭下拉框
|
|
function handleOutsideClick(event) {
|
|
const container = document.getElementById('searchSelectContainer');
|
|
if (!container.contains(event.target)) {
|
|
closeDropdown();
|
|
}
|
|
}
|
|
|
|
// 筛选选项
|
|
function filterOptions() {
|
|
const searchText = document.getElementById('searchInput').value.toLowerCase();
|
|
const options = document.querySelectorAll('.option');
|
|
const noResult = document.getElementById('noResult');
|
|
let hasMatch = false;
|
|
|
|
options.forEach(option => {
|
|
const text = option.textContent.toLowerCase();
|
|
if (text.includes(searchText)) {
|
|
option.style.display = 'block';
|
|
hasMatch = true;
|
|
} else {
|
|
option.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
// 显示或隐藏无结果提示
|
|
if (searchText && !hasMatch) {
|
|
noResult.classList.remove('hidden');
|
|
} else {
|
|
noResult.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
// 选择选项
|
|
document.querySelectorAll('.option').forEach(option => {
|
|
option.addEventListener('click', function() {
|
|
const value = this.textContent;
|
|
document.getElementById('searchSelect').value = value;
|
|
document.getElementById('selectedValue').textContent = value;
|
|
document.getElementById('selectedResult').classList.remove('hidden');
|
|
closeDropdown();
|
|
});
|
|
});
|
|
|
|
// 键盘导航
|
|
document.getElementById('searchInput').addEventListener('keydown', function(e) {
|
|
const options = document.querySelectorAll('.option:not([style*="display: none"])');
|
|
const activeOption = document.querySelector('.option.bg-neutral');
|
|
let index = -1;
|
|
|
|
if (activeOption) {
|
|
index = Array.from(options).indexOf(activeOption);
|
|
}
|
|
|
|
// 向下箭头
|
|
if (e.key === 'ArrowDown') {
|
|
e.preventDefault();
|
|
if (activeOption) {
|
|
activeOption.classList.remove('bg-neutral');
|
|
}
|
|
const nextIndex = (index + 1) % options.length;
|
|
if (options[nextIndex]) {
|
|
options[nextIndex].classList.add('bg-neutral');
|
|
options[nextIndex].scrollIntoView({ block: 'nearest' });
|
|
}
|
|
}
|
|
// 向上箭头
|
|
else if (e.key === 'ArrowUp') {
|
|
e.preventDefault();
|
|
if (activeOption) {
|
|
activeOption.classList.remove('bg-neutral');
|
|
}
|
|
const prevIndex = index > 0 ? index - 1 : options.length - 1;
|
|
if (options[prevIndex]) {
|
|
options[prevIndex].classList.add('bg-neutral');
|
|
options[prevIndex].scrollIntoView({ block: 'nearest' });
|
|
}
|
|
}
|
|
// 回车键
|
|
else if (e.key === 'Enter') {
|
|
e.preventDefault();
|
|
if (activeOption) {
|
|
activeOption.click();
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |