Jquery 自动完成未在 spring 表单中显示任何自动完成列表

Question

我有一个输入字段，我想在其中启用自动完成功能。我在下面的 header 部分包含了内容。

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />

<script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

字段

<form:input path="customer" maxlength="50" id="customer"
placeholder="Customer Name" cssClass="form-control"
required="true" />

Js

$( "#customer" ).autocomplete({
            minLength: 2,
            dataType: "json",
            cache: false,
            source : function(request, response) {
                $.ajax({
                    url : "http://localhost:8888/rider/get_rider",
                    dataType : "json",
                    method:'GET',
                    data : {
                        term : request.term
                    },
                    success: function(data){
                        response(data.map(function(value){
                            console.log(value);
                            return {
                                label: value.name,
                                value: value.name,
                                description: value.name
                            };
                        }));

                    }
                });
                }

        });

我可以看到控制器发回了有效的 json 响应。

控制器

@GetMapping(value="/get_rider",produces = "application/json")
    public List<RiderGroupDTO> getCustomerName(@RequestParam("term") String query){
        List<RiderGroupDTO> li=new ArrayList<>();
        li=riderGroupService.findAllGroups();

        return li;
    }

回应

{id: 1, name: "Admin", description: "Admin group to send coupons to all "}
{id: 2, name: "food", description: "food coupons"}

问题是，尽管响应已发送，但未显示在 jsp 上。即使在浏览器控制台上也没有错误。这里出了什么问题？

Answer 1

必须在本地服务器上进行测试。就从 php 页面返回 JSON 而言，这似乎有效。我认为一个问题可能与您要返回的 JSON 有关。我没有得到 JSON 回来。我不确定自动完成是如何工作的，所以你可能不得不尝试一下，因为它只显示所有 "name" 值而不是根据我输入的内容进行过滤。

这是我的服务器。

<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<input path="customer" maxlength="50" id="customer" placeholder="Customer Name" cssClass="form-control" required="true" />

<script>
$( document ).ready(function() {
$( "#customer" ).autocomplete({
            minLength: 2,
            dataType: "json",
            cache: false,
            source : function(request, response) {
                $.ajax({
                    url : "test1.php",
                    dataType : "json",
                    method:'POST',
                    data : {},
                    success: function(data){
                        response(data.map(function(value){
                            console.log(value);
                            return {
                                label: value.name,
                                value: value.name,
                                description: value.name
                            };
                        }));

                    }
                });
                }

        });
});
</script>

JSON 响应，实际上是一个对象数组，我认为您需要 name/value 对周围的引号。

[{"id": "1", "name": "Admin", "description": "Admin group to send coupons to all"},
{"id": "2", "name": "food", "description": "food coupons"}]

Jquery 自动完成未在 spring 表单中显示任何自动完成列表

Jquery autocomplete is not showing any autocomplete list in spring forms

ajax

jquery

jquery-ui-autocomplete

spring-boot