点击SearchBar时打开下拉菜单的实现问题求助

安全阿岳

2026-7-8

解决方案

1. 实现`openDropDown`函数触发select下拉

你的输入框绑定了onclick="openDropDown()"但未实现该函数，原生<select>的下拉展开无法通过类切换实现，需触发DOM事件完成。添加以下函数：

function openDropDown() {
  const selectElement = document.getElementById('uni_name_drpdwn');
  // 模拟点击事件触发下拉展开
  const clickEvent = new MouseEvent('mousedown', { bubbles: true });
  selectElement.dispatchEvent(clickEvent);
}

2. 移除无效代码并保留过滤逻辑

删除filterFunction中对myDropdown的类切换代码（该操作对select下拉无作用），修改后的过滤函数如下：

function filterFunction() {
  var input, filter, div, options, i;

  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  options = div.getElementsByTagName("option");
  
  for (i = 0; i < options.length; i++) {
    const txtValue = options[i].textContent || options[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      options[i].style.display = "";
    } else {
      options[i].style.display = "none";
    }
  }
}

3. 可选：优化交互联动

若希望点击输入框时先展开下拉再执行过滤（比如输入框为空时显示所有选项），可在openDropDown中调用过滤函数：

function openDropDown() {
  const selectElement = document.getElementById('uni_name_drpdwn');
  const clickEvent = new MouseEvent('mousedown', { bubbles: true });
  selectElement.dispatchEvent(clickEvent);
  // 触发过滤确保显示匹配选项
  filterFunction();
}