实现下拉菜单输入时自动滚动至首个匹配项-html教程-PHP中文网

实现下拉菜单输入时自动滚动至首个匹配项

本文介绍如何在用户输入国家名称前缀时，动态高亮首个匹配项并平滑滚动至该选项位置，提升下拉搜索体验。核心在于结合正则匹配、CSS 类控制与 scrollIntoView() API。

本文介绍如何在用户输入国家名称前缀时，动态高亮首个匹配项并平滑滚动至该选项位置，提升下拉搜索体验。核心在于结合正则匹配、css 类控制与 scrollintoview() api。

在构建带搜索功能的下拉菜单（如国家选择器）时，仅高亮匹配项是不够的——用户还需快速定位到结果。原代码已实现前缀匹配与 .selected-country 类切换，但缺少视觉锚定机制。以下为优化后的完整解决方案：

✅ 关键改进点

精准匹配逻辑：使用 ^${input} 正则确保仅匹配开头一致的国家（如输入 au 仅匹配 Austria、Australia，而非 United Kingdom）；
单次高亮 + 自动滚动：通过 found = true 标志确保仅第一个匹配项被高亮，并立即调用 item.scrollIntoView({ behavior: 'smooth', block: 'nearest' }) 滚动至可视区域；
防重复绑定：将 click 事件监听器移出循环（或改用事件委托），避免多次调用 filtrar() 导致重复绑定（见下方优化建议）；
样式强化：.selected-country 使用 Bootstrap 主色（#007bff）并强制文字为白色，确保可读性。

? 优化后的 JavaScript（推荐写法）

const countries = document.querySelectorAll('.dropdown-item');
const countryField = document.getElementById('country');
const dropdownMenu = document.getElementById('country_list');

// ✅ 推荐：使用事件委托避免重复绑定
dropdownMenu.addEventListener('click', function(e) {
  if (e.target.classList.contains('dropdown-item')) {
    countryField.value = e.target.textContent.trim();
    // 可选：隐藏下拉菜单（Bootstrap 5+）
    const bsDropdown = bootstrap.Dropdown.getInstance(countryField);
    if (bsDropdown) bsDropdown.hide();
  }
});

function filtrar() {
  const input = countryField.value.trim().toLowerCase();
  const regex = new RegExp(`^${input}`, 'i');
  let found = false;

  // 清除所有已选状态
  countries.forEach(item => item.classList.remove('selected-country'));

  // 重新匹配并滚动
  for (const item of countries) {
    if (found || input.length === 0) break;

    const itemText = item.textContent.toLowerCase();
    if (regex.test(itemText)) {
      item.classList.add('selected-country');
      item.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
      found = true;
    }
  }
}

// ✅ 建议：添加防抖（避免快速输入时频繁滚动）
let filterTimer;
countryField.addEventListener('input', () => {
  clearTimeout(filterTimer);
  filterTimer = setTimeout(filtrar, 150);
});

? 必备 CSS（确保滚动可见性）

.selected-country {
  background-color: #007bff !important;
  color: #fff !important;
  font-weight: 500;
}
/* 确保下拉菜单可滚动且高度可控 */
#country_list {
  max-height: 300px; /* 替换原 max-height: 300%（无效值） */
  overflow-y: auto;
}

⚠️ 注意事项

max-height: 300% 是无效写法 → 应改为具体像素值（如 300px）或 vh 单位；
scrollIntoView 兼容性良好（Chrome 61+, Firefox 68+, Edge 79+），旧版可降级为 behavior: 'auto'；
若使用 Bootstrap 5+，需通过 bootstrap.Dropdown 实例手动控制展开/收起，避免点击后菜单残留；
输入为空时应清除所有高亮（当前代码已处理），但需注意 scrollIntoView 不应在空输入时触发。