jQuery UI autocomplete with AJAX call not displaying settings

Question

Well, I’m trying to implement the jQuery UI in my code, but partially it does not work because it does not display the options below the component of input. It performs of being correct the request, but when showing the options on the screen comes blank. I’m pretty sure that’s the way I’m sending my JSON for the attribute source of plugin.

Below follow the codes:

O Input

<div class="ui-widget">
    <input id="first-name" placeholder="Primeiro Nome" name="firstName" type="text" class="form-control"/>
</div>

JS Code

$(document).ready(function () {
    $(function () {
        $("#first-name").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "${pageContext.request.contextPath}/auth/getCustomerAJAX",
                    type: "GET",
                    data: {
                        paramName: request.term
                    },
                    dataType: "json",
                    success: function (data) {
                        var obj = JSON.parse(data);
                        alert(obj);
                        response(obj.firstName);
                    }
                });
            }
        });
    });
});

The callback (Disregard the NULL)

[
{
"idCustomer":1,
"tenantId":null,
"birthDate":null,
"email":"[email protected]",
"firstName":"j",
"gender":"\u0000",
"lastName":"Galao Bonin",
"document":null,
"customerPhone":null,
"passenger":null,
"customerAddress":null,
"observations":null,
"customerService":null
}
]

Answer 1

ta missing part of "select" friend I will show you an example of my:

$('#cid_nome').autocomplete({                                                       // AUTOCOMPLETAR A PLACA DO VEICULO
        minLength: 2,                                                                   // TAMANHO MINIMO PARA AUTOCOMPLETAR
        source: function( request, response ) {                                         // ORIGEM DA INFORMAÇÃO                
            var obj = new Object();                                                     // NOVO OBJETO
            obj.maxRows = 10;                                                           // MAXIMO DE REGISTROS NO RETORNO
            obj.letra = request.term;                                                   // TERMO DA PESQUISA
            var data = custom.ajax(obj,'','../view/consultaCidade.php');                // CONSULTA EM BANCO
            response( $.map( data, function( item ) {                                   // FUNCAO RESPONSE 
                return {label: item.cid_nome+'->'+item.cid_estado,obj: item} }));       // RETORNO
        },                                                                              // FIM DA ORIGEM DOS DADOS
        select: function( event, ui ) {                                                 // PARAMETRO SELECT                                
            $( "#cid_nome" ).val( ui.item.obj.cid_nome );                               // PREENCHE RETORNO DA CONSULTA
            $( "#cid_cod_nome" ).val(ui.item.obj.cid_id);                               // PREENCHE RETORNO DA CONSULTA            
        }                                                                               // FIM DO PARAMETRO SELECT
    });

in the autocomplete select has to Ester filled with what you have in your callback of your data query