如何为 MySQL 数据库动态数据创建带搜索功能的下拉菜单

本文教你使用原生 html/css/js 结合 php，将 mysql 查询结果渲染为可搜索的自定义下拉菜单，无需第三方库，兼容性强、轻量可控。

要为 mysql 数据库中的动态数据（如 peminjaman 表的 id 和 nama 字段）构建一个带实时搜索功能的下拉菜单，不能直接依赖原生 标签——因其不支持内置搜索。正确做法是：用语义化结构模拟下拉行为（即“伪下拉”），结合 php 动态输出选项，并通过 javaScript 实现客户端搜索过滤。

以下是一个完整、可运行的实现方案：

✅ 步骤一：PHP 查询数据库并生成选项列表

 $row['id'],         'label' => $row['id'] . '. ' . htmlspecialchars($row['nama'])     ]; } ?>

⚠️ 注意：务必使用 htmlspecialchars() 防止 xss 攻击；ORDER BY 保证选项顺序稳定。

✅ 步骤二：HTML 结构（含搜索输入框 + 可点击选项）

        请选择借阅人...      
          
                "             onclick="selectOption(this)">            
   
 
   

✅ 步骤三：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 项目中。