本文教你使用原生 html/css/js 结合 php，将 mysql 查询结果渲染为可搜索的自定义下拉菜单，无需第三方库，兼容性强、轻量可控。
要为 MySQL 数据库中的动态数据（如 peminjaman 表的 id 和 nama 字段）构建一个带实时搜索功能的下拉菜单，不能直接依赖原生
以下是一个完整、可运行的实现方案：
✅ 步骤一：PHP 查询数据库并生成选项列表
$row['id'],
'label' => $row['id'] . '. ' . htmlspecialchars($row['nama'])
];
}
?>⚠️ 注意：务必使用 htmlspecialchars() 防止 XSS 攻击；ORDER BY 保证选项顺序稳定。
✅ 步骤二：HTML 结构（含搜索输入框 + 可点击选项）
✅ 步骤三：CSS 样式（简洁响应式）
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 12px 20px;
font-size: 14px;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
text-align: left;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
#myInput {
box-sizing: border-box;
width: 100%;
padding: 10px 16px;
font-size: 14px;
border: none;
border-bottom: 1px solid #ddd;
background-color: #f9f9f9;
}
#myInput:focus {
outline: none;
border-bottom: 2px solid #04AA6D;
}
.dropdown {
position: relative;
display: inline-block;
width: 100%;
}
.dropdown-content {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: #fff;
max-height: 200px;
overflow-y: auto;
border: 1px solid #ccc;
border-top: none;
z-index: 1000;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
border-radius: 0 0 4px 4px;
}
.dropdown-content a {
color: #333;
padding: 10px 16px;
text-decoration: none;
display: block;
font-size: 14px;
}
.dropdown-content a:hover {
background-color: #f0f7ff;
color: #04AA6D;
}
.dropdown-content.show {
display: block;
}✅ 步骤四：JavaScript 交互逻辑（含搜索与选择）
function toggleDropdown() {
document.getElementById("myDropdown").classList.toggle("show");
}
function filterDropdown() {
const input = document.getElementById("myInput");
const filter = input.value.toLowerCase().trim();
const links = document.querySelectorAll("#dropdownOptions a");
links.forEach(link => {
const txt = link.textContent.toLowerCase();
link.style.display = txt.includes(filter) ? "" : "none";
});
}
function selectOption(el) {
const value = el.getAttribute("data-value");
const label = el.textContent.trim();
document.getElementById("dropdownTrigger").textContent = label;
document.getElementById("selectedId").value = value;
// 关闭下拉菜单
document.getElementById("myDropdown").classList.remove("show");
// 清空搜索框并重置显示
document.getElementById("myInput").value = "";
document.querySelectorAll("#dropdownOptions a").forEach(a => a.style.display = "");
}
// 点击外部关闭下拉
window.onclick = function(event) {
if (!event.target.matches('.dropbtn') && !event.target.closest('.dropdown-content')) {
document.getElementById("myDropdown").classList.remove("show");
}
};✅ 最终整合到表单中（示例）
? 补充说明与最佳实践
- 性能提示：本方案在客户端过滤，适合数据量 ≤ 500 条；若数据量大（如 >1000 条），建议改用 AJAX + 后端模糊查询（如 WHERE nama LIKE '%{$keyword}%'）实现搜索。
- 无障碍支持：可进一步添加 aria-expanded、role="listbox" 等属性提升可访问性。
- 移动端适配：.dropdown-content 可加 max-height 和 overflow-y: auto，确保长列表可滚动。
- 安全加固：所有用户输出均经 htmlspecialchars() 处理；SQL 查询使用预处理语句更佳（本文为简洁演示暂用普通查询）。
通过以上结构，你即可获得一个完全由 MySQL 驱动、零依赖、可搜索、可回填、符合现代 Web 标准的下拉组件，轻松集成至任何 PHP+MySQL 项目中。
