如何配置Google Geocomplete仅显示不含国家信息的城市名称？

我来帮你搞定这个问题！Google Geocomplete默认确实会返回带区域、国家的完整地址串，但通过针对性的配置和自定义逻辑，就能只展示纯城市名称，分两种常用场景给你方案：

一、先限定搜索结果为城市类型（基础配置） #

首先要确保Geocomplete只返回城市级别的结果，避免无关地址干扰，这需要设置types参数为["(cities)"]，还可以可选添加国家限制来缩小范围：

$("#your-city-input").geocomplete({
  types: ["(cities)"], // 核心：限定仅搜索城市类地点
  componentRestrictions: { country: "in" } // 可选：指定国家（比如印度），避免重名城市
});

二、自定义下拉提示或输入框内容 #

接下来处理显示问题，有两种方式可选：

方式1：直接修改下拉提示的显示文本 #

如果希望下拉列表里就只显示城市名，而不是完整地址，需要自定义render方法，从返回的地址组件中精准提取城市名称（比简单拆分逗号更可靠）：

$("#your-city-input").geocomplete({
  types: ["(cities)"],
  componentRestrictions: { country: "in" },
  render: function(item) {
    let cityName = "";
    // 遍历地址组件，找到标记为"locality"（城市）的部分
    for (const component of item.address_components) {
      if (component.types.includes("locality")) {
        cityName = component.long_name;
        break;
      }
    }
    // 构建下拉列表项
    return $("<li></li>")
      .append($("<a></a>").text(cityName))
      .data("item", item);
  }
});

方式2：用户选择后将输入框替换为纯城市名 #

如果下拉列表可以暂时显示完整地址，但用户选择后输入框只保留城市名，可以监听geocode:result事件来修改输入值：

$("#your-city-input")
  .geocomplete({
    types: ["(cities)"],
    componentRestrictions: { country: "in" }
  })
  .on("geocode:result", function(event, result) {
    let cityName = "";
    // 同样从地址组件中提取城市名
    for (const component of result.address_components) {
      if (component.types.includes("locality")) {
        cityName = component.long_name;
        break;
      }
    }
    $(this).val(cityName); // 将输入框值替换为纯城市名
  });

两种方式各有适用场景：方式1适合全程让用户看到简洁的城市名，方式2适合需要保留搜索过程的完整提示，但最终输入框只存城市名。

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