关于结合Select2实现Google Maps autocomplete功能的报错咨询

嘿，我之前也碰到过类似的问题，这个报错本质是JSON解析时遇到了不符合规范的内容，结合你用Select2对接Google Maps Autocomplete的场景，我整理了几个实用的排查和解决方向：

1. 先检查返回的JSON格式是否合法 #

你提到的JSON结果大概率存在格式问题——要么不是纯JSON（比如带了JSONP的回调函数包裹），要么本身有语法错误（比如键名没加双引号、字符串用了单引号、数组/对象末尾多了逗号）。

举个例子，如果返回的内容是这样的：

someCallback({
  "predictions": [{"description": "London, UK", "place_id": "abc123"}]
})

那直接用JSON.parse()解析肯定会报错，因为外层多了回调函数。这种情况你得先把回调部分剥离，再解析内部的JSON结构。要是是纯JSON，一定要确保所有键和字符串都用双引号，数组/对象末尾没有多余逗号。

2. 检查Select2的AJAX配置是否正确 #

用Select2对接Google Places API的时候，AJAX配置很容易踩坑：

• 首先dataType要对应API返回的格式：Google Places的Autocomplete API返回的是纯JSON，所以要设为'json'；如果是用JSONP跨域（现在大多用CORS了），才设'jsonp'
• 然后processResults函数里必须把Google返回的结果转换成Select2需要的结构——也就是每个选项要有id和text字段

给你个正确的配置参考：

$('#city-select').select2({
  ajax: {
    url: 'https://maps.googleapis.com/maps/api/place/autocomplete/json',
    dataType: 'json',
    delay: 250, // 输入延迟，避免频繁请求
    data: function (params) {
      return {
        input: params.term, // 用户输入的关键词
        key: '你的Google API密钥',
        types: '(cities)' // 限制只返回城市，可根据需求调整
      };
    },
    processResults: function (data) {
      // 把Google的predictions转换成Select2能识别的格式
      return {
        results: data.predictions.map(item => ({
          id: item.place_id,
          text: item.description
        }))
      };
    },
    cache: true
  },
  minimumInputLength: 2 // 输入至少2个字符才触发请求
});

要是dataType设错了，比如该用json却用了jsonp，就会导致解析失败报语法错误。

3. 定位报错的具体代码位置 #

打开浏览器开发者工具的「Sources」面板，找到报错的行号，看看是哪一步出问题：

• 是不是你手动调用了JSON.parse()，但传入的不是合法的JSON字符串？
• 是不是AJAX请求返回的不是预期的JSON，而是HTML错误页面（比如404、权限错误）？

比如如果请求返回的是403权限错误的HTML页面，那用JSON解析肯定会报类似"Unexpected token <"的错误，这时候就要检查API密钥是否有效、有没有开启Places API权限。

4. 用校验工具验证JSON #

把你的JSON内容复制到JSON校验工具里，一键就能查出语法问题。比如键名没加双引号、字符串用了单引号这种低级错误，很容易被忽略，但会直接导致解析失败。

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