根据输入内容切换下拉列表的实现方案咨询

核心逻辑是：同时渲染机场下拉列表和谷歌地图自动补全输入框，通过监听输入内容，判断是否匹配机场列表中的选项，动态切换两个输入控件的显示状态。

1. HTML结构 #

把两个输入控件放在同一容器内，初始状态显示机场下拉，隐藏谷歌输入框：

<div class="location-select-container">
  <!-- 机场下拉列表 -->
  <select id="airport-select" class="location-input">
    <option value="">请选择取车点</option>
    <!-- 从数据库动态生成的机场选项 -->
    <option value="北京首都国际机场">北京首都国际机场</option>
    <option value="上海浦东国际机场">上海浦东国际机场</option>
    <option value="广州白云国际机场">广州白云国际机场</option>
  </select>
  
  <!-- 谷歌地图自动补全输入框 -->
  <input type="text" id="google-autocomplete" class="location-input hidden" placeholder="输入取车地点">
</div>

2. 基础样式 #

用hidden类控制控件的显示/隐藏，保证两个控件样式统一：

.location-select-container {
  position: relative;
  width: 300px;
}

.location-input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.hidden {
  display: none;
}

3. JavaScript核心实现 #

3.1 数据准备与事件监听 #

从数据库获取机场列表，转成Set用于快速匹配；监听两个输入控件的输入事件，动态切换显示状态：

// 从数据库获取的机场列表（实际项目中通过接口异步获取）
const airportNames = [
  '北京首都国际机场',
  '上海浦东国际机场',
  '广州白云国际机场',
  // 更多机场...
];
const airportSet = new Set(airportNames.map(name => name.toLowerCase()));

const airportSelect = document.getElementById('airport-select');
const googleInput = document.getElementById('google-autocomplete');

// 防抖函数，避免频繁触发判断（优化性能）
function debounce(func, delay = 200) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
}

// 输入处理逻辑
const handleInputChange = debounce((e) => {
  const inputVal = e.target.value.trim().toLowerCase();
  
  if (!inputVal) {
    // 输入为空时，切回机场下拉列表
    airportSelect.classList.remove('hidden');
    googleInput.classList.add('hidden');
    return;
  }

  // 判断输入内容是否匹配机场列表
  const isMatchAirport = airportSet.has(inputVal) || 
    Array.from(airportSelect.options).some(opt => opt.value.toLowerCase().includes(inputVal));

  if (isMatchAirport) {
    // 匹配到机场，显示下拉列表，隐藏谷歌输入框
    airportSelect.classList.remove('hidden');
    googleInput.classList.add('hidden');
    // 可选：自动选中第一个匹配的机场选项
    const matchedOpt = Array.from(airportSelect.options).find(opt => 
      opt.value.toLowerCase().includes(inputVal)
    );
    if (matchedOpt) airportSelect.value = matchedOpt.value;
  } else {
    // 未匹配到机场，切换到谷歌自动补全
    airportSelect.classList.add('hidden');
    googleInput.classList.remove('hidden');
    googleInput.value = e.target.value;
    googleInput.focus();
  }
});

// 绑定事件
airportSelect.addEventListener('input', handleInputChange);
googleInput.addEventListener('input', handleInputChange);

3.2 谷歌地图自动补全初始化 #

确保谷歌地图Places API加载完成后，初始化自动补全功能：

// 初始化谷歌自动补全（需先引入谷歌地图API脚本）
function initGoogleAutocomplete() {
  const autocomplete = new google.maps.places.Autocomplete(googleInput, {
    types: ['establishment', 'geocode'], // 可自定义地点类型
    componentRestrictions: { country: 'cn' } // 可选：限制国家范围
  });

  // 选中地点后的回调（可根据业务需求处理地址信息）
  autocomplete.addListener('place_changed', () => {
    const place = autocomplete.getPlace();
    console.log('选中的取车点:', place.formatted_address);
    // 这里可以把选中的地址存入表单或提交给后端
  });
}

// 页面加载完成后初始化
window.addEventListener('load', initGoogleAutocomplete);

4. 优化建议 #

• 异步加载机场数据：实际项目中，机场列表从后端接口获取，加载完成后再渲染下拉选项并更新airportSet。
• 平滑过渡效果：把display: none换成opacity: 0 + visibility: hidden，配合CSS transition实现切换动画，提升用户体验。
• 移动端适配：调整控件宽度为100%，适配不同屏幕尺寸。
• 输入同步：切换控件时，确保输入内容同步，避免用户重复输入。

内容的提问来源于stack exchange，提问作者gzb