jQuery 自动完成显示所有元素而不是键入的元素

Question

我正在尝试使用 jQuery 实现自动完成。尝试了示例https://jqueryui.com/autocomplete/并且工作正常。但是当我从服务器获得相同的响应时，它显示所有元素而不是键入搜索。

现在我尝试从服务器（控制器）发送列表

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;

    }

如果我传递 JsonString，得到“Uncaught TypeError: Cannot use 'in' operator to search for 'length' in ["ActionScript","AppleScript","BASIC","Clojure","JavaScript","Python","红宝石“]”

[![$(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);
               
            });
            },
       
    });

});][1]][1]

尝试将响应转换为 JSON 对象。错误消失了，但结果没有被过滤，无论我输入什么，显示所有元素。请看一下选择。

控制台输出如下：

来自服务器：ActionScript、AppleScript、BASIC、Clojure、JavaScript、Python、Ruby

转换为json数组后：["ActionScript","AppleScript","BASIC","Clojure","JavaScript","Python","Ruby"]

转换为 json OBJECT 后：ActionScript,AppleScript,BASIC,Clojure,JavaScript,Python,Ruby

Answer 1

OMG，上面的代码就可以了。我必须添加一个过滤器，如下所示。

if (data) {
                // Filter data on the client side if necessary
                var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
                var filteredArray = $.grep(data, function(item) {
                    return matcher.test(item);
                });
                response(filteredArray);
            } else {
                response([]);
            }