基于Yandex SuggestView实现仅城市自动补全及未选择校验

1. 限制补全列表仅返回城市 #

Yandex Maps的SuggestView默认会返回多种类型的地点（如区域、街道等），通过配置options.type参数，指定仅过滤城市类型的结果即可解决该问题。同时我们需要记录用户是否从补全列表中选择内容，为后续验证做准备：

function onLoad(ymaps) {
  var suggestView = new ymaps.SuggestView('city', {
    options: {
      // 仅返回城市类型的补全项
      type: ['city']
    }
  });

  // 标记用户是否从补全列表选中有效城市
  window.citySelected = false;

  // 监听补全项选中事件，标记为已选择
  suggestView.events.add('select', () => {
    window.citySelected = true;
  });

  // 监听输入框手动输入事件，取消已选择标记
  document.getElementById('city').addEventListener('input', () => {
    window.citySelected = false;
  });
}

2. 添加按钮点击的验证逻辑 #

首先补充按钮的HTML代码：

<input type="text" name="city" id="city">
<button id="citySubmitBtn">确认城市</button>

然后添加验证逻辑，点击按钮时检查用户是否从补全列表选择了有效城市：

// 可放在onLoad函数内，或页面加载完成后的脚本中
document.getElementById('citySubmitBtn').addEventListener('click', () => {
  const cityInput = document.getElementById('city');
  const inputValue = cityInput.value.trim();

  // 验证条件：未选中补全列表项 或 输入为空
  if (!window.citySelected || !inputValue) {
    // 自定义错误提示（可替换为页面内的提示元素）
    alert('请从下拉列表中选择有效城市');
    cityInput.focus();
    return;
  }

  // 验证通过，执行后续业务逻辑
  console.log('已选择有效城市：', inputValue);
});

说明 #

• type: ['city'] 是Yandex Maps SuggestView的官方配置项，用于过滤返回的补全类型，确保仅显示城市。
• 通过select事件和input事件标记选择状态，避免用户手动输入非城市内容绕过验证。
• 错误提示可根据需求替换为更友好的页面内提示（如修改DOM元素显示错误信息），而非alert。

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