0

Bom dia pessoal, estou com problemas para implementar um campo com autocomplete em uma aplicação Asp .Net MVC. O problema é o seguinte, utilizando um Ajax eu consigo ir até o meu controller e buscar resultados da consulta, porem, na volta onde deve exibir o resultado ele sempre cai no campo de "erro", mostrando Json em um "alert" como vou mostrar logo abaixo:

$(document).ready(function () {
    $('#Cd_Cod_Produto').keypress(function () {
        $('#Cd_Cod_Produto').autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "/Estoque/GetAutoComplete",
                    type: "POST",
                    dataType: "application/json",
                    data: { term: request.term },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return {
                                label: item.Name,
                                value: item.Value                                  
                            }
                        }))
                    },
                    error: function (response) {
                        alert(response.responseText);
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    }                   
                });
            }
        });

    });

});

Como podem ver, caso ocorra algum erro, é exibido um alert com o resultado da busca, e sempre cai nesse alert. O meu Controller está dessa forma:

 public ActionResult GetAutoComplete(string term)
    {
        EstoqueDAO dao = new EstoqueDAO();

        List<Autocomplete> lista = dao.BuscaResultados(term);

        dao.Dispose();

        string json = JsonConvert.SerializeObject(lista);

        return Json(json, JsonRequestBehavior.AllowGet);
    }

e este é o modelo que estou utilizando apenas para teste:

 public class Autocomplete
{
    public string Name { get; set; }
    public string Value { get; set; }

}

A busca no banco de dados está retornando valores corretamente, acredito que não seja o problema. inserir a descrição da imagem aqui

Como podem ver na imagem é o que acontece com o retorno da função. Alguem tem alguma dica ou sugestão de onde eu estou errando? Desde já agradeço a ajuda.

Atenciosamente,

Atualização:

Mudei o script para está forma:

$(document).ready(function () {
    $('#Cd_Cod_Produto').keypress(function () {
        $('#Cd_Cod_Produto').autocomplete({
            source: function () {
                $.get(url, { term: $('#Cd_Cod_Produto').val() }, function (data) {
                    $.map(data, function (item) {
                        return {
                            label: item.Name,
                            val: item.Value

                            //console.log(item.Name);

                        }                              
                    });

                });
            }
        });

    });
});

Desse jeito ele busca os resultados no controller, mas ainda não exibi nada no autocomplete. Se retirar os comentarios da linha "//console.log(item.Name)" ele exibi os resultados no console normalmente.

4
  • Retira esse trecho de código string json = JsonConvert.SerializeObject(lista); e retorna assim: return Json(lista, JsonRequestBehavior.AllowGet); Commented 19/02/2019 às 12:48
  • Olá @PedroPaulo, obrigado por responder. fiz o que você falou, mas continua caindo no alert, a diferença é que o Json retornado ficou desta forma: [{"Name":"ES001","Value":"ES001"},{"Name":"ES002","Value":"ES002"},{"Name":"ES003","Value":"ES003"},{"Name":"ES004","Value":"ES004"}]...sem os "\" como estava sendo exibido anteriormente.
    – Q.Wesley
    Commented 19/02/2019 às 13:02
  • Outra observação, esse método deveria ser GET, semanticamente faz mais sentido. Até o nome do seu método no back-end começa com Get. Commented 19/02/2019 às 13:15
  • @Pedro Paulo, eu troquei os métodos para ficar mais semântico, mas o problema continua.
    – Q.Wesley
    Commented 19/02/2019 às 13:39

1 Resposta 1

0

mude essa parte:

 function (data) {
                        response($.map(data, function (item) {
                            return {
                                label: item.Label,
                                value: item.Value                                  
                            }
                        }))

para:

function (data) {
 $.map(data, function (item) {
  return {
       label: item['Name'],
       value: item['Value']   
      //ou
      //label: item.Name,
      //value: item.Value                                 
   }
   }

Exemplo funcional:

var lis = [{'Name': '1', 'Value': 'A'}, {'Name': '2', 'Value': 'B'}, {'Name': '3', 'Value': 'C'}, {'Name': '4', 'Value': 'D'}];


var x = $.map(lis, function(item){
     return {
       label: item.Name,
      value: item.Value                              
   }
});

console.log(x);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

10
  • obrigado pela sua resposta, foi um erro de uma tentativa anterior, já mudei para "Name" e continua não funcionando.
    – Q.Wesley
    Commented 19/02/2019 às 13:03
  • @Q.Wesley alterei a resposta.
    – HudsonPH
    Commented 19/02/2019 às 13:21
  • eu fiz as mudanças que você falou, não deu certo, continua caindo no alert.
    – Q.Wesley
    Commented 19/02/2019 às 13:38
  • poderia testar o retorno somente do Data, algo assim function (data) { return data;}
    – HudsonPH
    Commented 19/02/2019 às 13:40
  • e para ter certeza do resultado crie um var para receber o ajax, e depois use no source
    – HudsonPH
    Commented 19/02/2019 às 13:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .