Question

我有一个要启用自动完成功能的输入字段。我已在下面的标题部分中添加了

。

<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。我不确定自动完成功能的真正工作原理，因此您可能不得不尝试一下，因为它只是显示所有“名称”值，而不是按我键入的内容进行过滤。

这是我拥有的服务器。

<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响应，实际上是一个对象数组，我认为您需要在名称/值对周围加上引号。

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

jQuery自动完成功能未在Spring表单中显示任何自动完成列表

1 个答案: