Spring Boot+Thymeleaf中JQuery Autocomplete报错求助

核心问题分析 #

你遇到的请求未触发、点击事件失效，大概率是跨域限制、jQuery/UI依赖问题或Autocomplete配置错误导致，以下是分步排查和修复方案：

1. 先确保依赖引入顺序与兼容性 #

jQuery UI Autocomplete完全依赖jQuery，必须保证引入顺序正确，且版本兼容（推荐jQuery 3.x + jQuery UI 1.13.x组合）：

<!-- 优先引入jQuery核心库 -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<!-- 再引入jQuery UI及样式 -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

2. 修复跨域问题（请求未抵达服务器的核心原因） #

由于你调用的是第三方跨域接口，浏览器会触发CORS拦截，导致请求无法发送。有两种解决方式：

方式一：Spring Boot后端代理请求

在你的Spring Boot项目中新增代理Controller，将前端请求转发到目标接口，规避跨域：

@RestController
@RequestMapping("/proxy")
public class GeoProxyController {
    private final RestTemplate restTemplate;

    // 注入RestTemplate（需提前配置Bean）
    public GeoProxyController(RestTemplate restTemplate) {
        this.restTemplate = restTemplate;
    }

    @GetMapping("/geoDetails")
    public ResponseEntity<String> proxyGeoDetails(@RequestParam String term) {
        String targetUrl = String.format("https://api.nunyito.com/api/geoDetailsForWeb?term=%s", term);
        String response = restTemplate.getForObject(targetUrl, String.class);
        return ResponseEntity.ok(response);
    }
}

方式二：调整前端Autocomplete配置

将请求地址改为上述代理接口，同时修正Autocomplete的数据源与事件绑定逻辑：

$(function() {
    // 确保选择器与Thymeleaf渲染后的输入框ID一致
    $("#geo-input").autocomplete({
        minLength: 2, // 输入至少2个字符触发请求
        source: function(request, response) {
            $.ajax({
                url: "/proxy/geoDetails", // 使用代理接口
                data: { term: request.term },
                dataType: "json",
                success: function(data) {
                    // 将接口返回数据转换为Autocomplete要求的label/value格式
                    var formattedData = $.map(data, function(item) {
                        return {
                            label: item.name, // 替换为接口返回的显示字段
                            value: item.id    // 替换为接口返回的取值字段
                        };
                    });
                    response(formattedData);
                },
                error: function(xhr, status, err) {
                    console.error("请求失败:", status, err); // 控制台查看具体错误
                }
            });
        },
        select: function(event, ui) {
            alert('hi'); // 此处应正常触发
            // 可选：自定义输入框显示内容
            event.preventDefault();
            $("#geo-input").val(ui.item.label);
        }
    });
});

3. 验证Thymeleaf渲染正确性 #

确保Thymeleaf渲染后的输入框ID与JS选择器一致，避免因模板表达式导致ID变更：

<!-- Thymeleaf写法示例 -->
<input type="text" id="geo-input" th:field="*{geoKeyword}" placeholder="输入关键词...">

4. 浏览器调试技巧 #

按F12打开开发者工具：

• Network标签：查看是否有请求发出，若没有则检查Autocomplete初始化时机（必须包裹在$(function(){})中）；若请求报错，查看Response或Console中的错误信息（如CORS、参数错误）。
• Console标签：排查JS语法错误或未捕获的异常。

内容的提问来源于stack exchange，提问作者Nunyet Calçada