Search code examples
jqueryajaxspring-bootjquery-ui-autocomplete

Jquery autocomplete is not showing any autocomplete list in spring forms

I am having a input field on which I want to enable autocomplete feature. I have included below in the header section.

<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>

Field

<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
                            };
                        }));

                    }
                });
                }

        });

I can see that a valid json response is sent back from the controller.

Controller

@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;
    }

Response

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

The issue is that, though the response is getting sent , it is not getting shown on the jsp. Even there is no error on browser console. What's going wrong here?

Solution

  • Had to test on a local server. This seems to work as far as getting JSON back from the php page. I think one problem might have been with the JSON that you are returning. I was not getting JSON back. I am not sure how the autocomplete works really, so you might have to play around with that because it is just displaying all "name" values and not filtering by what I type in.

    This is what I have an a server.

    <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 response, really an array of objects, and I think you need the quotes around the name/value pairs.

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

    Example