Jquery autocomplete not populate list

Question

I have the following jquery code that gets json data from server.

$("#autocomplete").autocomplete({
        minLength: 2,
        source: function(request, response){
            $.ajax({
                url: "data.php",
                dataType: "json",
                data: { q: request.term },
                success: function(data){
                    response(data.map(function(value){
                        return {
                            description: value.description
                        };
                    }));
                    console.log(JSON.stringify(data));
                }
            });
        },
        select: function(event, ui){
            $(this).val(ui.item.description);
        }
    });

While the console.log command display my data from server as follow

[{"description":"Description 1"},{"description":"Description 2"},{"description":"Description 3"},{"description":"Description 4"}]

The #autocomplete field does not get populated. It only displays the li elements without value.

Any idea why?

Thanks!

Answer 1

Use

return {
        label: value.description,
        value: value.description,
        description: value.description
       };

instead of

  return {
         description: value.description
         };