autocomplete jQuery UI with AJAX call not displaying the aptions

Question

autocomplete jQuery UI with AJAX call not displaying the aptions

Navigation

#1 by (1 votes)

1

Well, I'm trying to implement the autocomplete of the jQuery UI in my code, but in a partial way it does not work as it does not display the options below the input . It performs the request correctly, but when the options are displayed on the screen it is blank. I'm pretty sure that's the way I'm sending my JSON to the source attribute of the plugin .

Below are the codes:

The 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

[
{
"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
}
]

jquery jquery-ui

asked by anonymous 18.03.2015 / 00:35

1 answer

Use a variable created inside an AJAX request in another function Logical system for directories

score 1 · Answer 1

It's missing the part of "select" friend I'll show you an example of mine:

$('#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 autocomplete the select has to be filled with what you have in your callback of your data query