jQuery Autocomplete显示全部元素而非输入匹配结果问题求助

我用jQuery UI实现自动补全功能，官方示例能正常运行，但从Spring服务器获取响应时，无论输入什么内容，组件都会显示全部元素，不会过滤匹配结果。

服务器端代码（Spring Controller） #

List<String> data2 = new ArrayList<String>();   
data2.add("ActionScript");
data2.add("AppleScript");
data2.add("BASIC");
data2.add("Clojure");
data2.add("JavaScript");
data2.add("Python");
data2.add("Ruby");

@RequestMapping(value = "/invoiceNumberData2.html", method = RequestMethod.GET , produces = MediaType.APPLICATION_JSON_VALUE)
public @ResponseBody List<String> getLicenseNumber2(@RequestParam String term) {
    return data2;
}

前端代码 #

$(document).ready(function() {
    $("#licenseNumber").autocomplete({
        dataType: 'json',
        minLength: 3,
        source: function (request, response) {
            jQuery.get("/dltcEPay/secure/invoiceNumberData2.html", {
                term: request.term
            }, function (data) {
                console.log("Coming from server: " + data); 
                var JsonString = JSON.stringify(data);
                console.log("After converting to json array: " + JsonString);   
                var JsonObject = JSON.parse(JsonString);        
                console.log("After converting to json OBJECT: " + JsonObject);             
                response(JsonObject);
            });
        }
    });
});

问题现象 #

• 前端直接传递响应数据时，出现错误：Uncaught TypeError: Cannot use 'in' operator to search for 'length' in ["ActionScript","AppleScript","BASIC","Clojure","JavaScript","Python","Ruby"]
• 转换为JSON对象后错误消失，但自动补全始终显示全部选项，不会根据输入内容过滤。
• 控制台输出：

Coming from server: ActionScript,AppleScript,BASIC,Clojure,JavaScript,Python,Ruby
After converting to json array: ["ActionScript","AppleScript","BASIC","Clojure","JavaScript","Python","Ruby"]
After converting to json OBJECT: ActionScript,AppleScript,BASIC,Clojure,JavaScript,Python,Ruby

解决方法 #

1. 后端实现过滤逻辑 #

当前后端仅原样返回全部数据，未根据前端传入的term参数做过滤，这是自动补全显示全部内容的核心原因。修改Spring Controller代码，添加过滤逻辑：

import java.util.stream.Collectors;

// ...

@RequestMapping(value = "/invoiceNumberData2.html", method = RequestMethod.GET , produces = MediaType.APPLICATION_JSON_VALUE)
public @ResponseBody List<String> getLicenseNumber2(@RequestParam String term) {
    // 过滤包含term（不区分大小写）的元素
    return data2.stream()
                .filter(item -> item.toLowerCase().contains(term.toLowerCase()))
                .collect(Collectors.toList());
}

2. 前端移除不必要的JSON转换 #

设置dataType: 'json'后，jQuery会自动将服务器响应解析为JSON对象，无需手动执行JSON.stringify和JSON.parse，多余的转换会引发类型异常。简化前端代码：

$(document).ready(function() {
    $("#licenseNumber").autocomplete({
        dataType: 'json',
        minLength: 3,
        source: function (request, response) {
            jQuery.get("/dltcEPay/secure/invoiceNumberData2.html", {
                term: request.term
            }, function (data) {
                console.log("服务器返回数据: ", data);
                // 直接将解析好的JSON数组传给response
                response(data);
            });
        }
    });
});

原理说明 #

jQuery UI Autocomplete的远程数据源模式下，组件会将输入内容通过term参数传递给服务器，必须由服务器端根据该参数过滤数据后返回，组件才会展示匹配结果。若服务器返回全部数据，组件自然会显示所有选项。

另外，前端的JSON重复转换操作完全多余，dataType: 'json'已告知jQuery自动解析响应为JSON对象，重复操作会导致数据类型异常，引发之前的类型错误。

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