Autocomplete shows no results in View input

Question

I have seen other cases in some answers here, I tried to follow the steps of other answers and did not help at all! I’m having a doubt, this is my first time using autocomplete of jquery, I’m new in Asp.net mvc!

I wanted the user to type in textbox or input, waking up with him typing already appeared the result of what he is looking for in the field, which led me to the autocomplete, followed a few steps on the internet, but as it is my first time using it, I’m doubtful, it does not return the database data, because what I want to return from the bank is the CLIENT for IDCLIENTE, the instruction SQL I already have! My problem and what he is not bringing when typing does not appear anything!

This is my Viewwith the function Jquery at the beginning of the page:

<script>    
    $(function () {
        $("#cliente").autocomplete({
            source: '@Url.Action("GetClientesJson",)',
            minLength: 1
        });
    });
</script>

<div class="row">
    <div class="span12">
        <div class="widget widget-table action-table">
            <div class="widget-header">
                <i class="icon-th-list"></i>
                <h3>Vendas Por Produtos</h3>
            </div>
            <!-- /widget-header -->
            <div class="widget-content">
                @if (ViewData["reportvendas"] == null)
                {
                    <form action="#" id="myform" method="post">
                        <div class="login-fields">
                            <div class="field">
                                <table style="margin:10px">
                                    <tr>
                                        <td>Data Venda:</td>
                                        <td><input type="text" id="inicio" name="inicio" class="login requerido birth" style="width:90px" /></td>
                                        <td>Ate</td>
                                        <td><input type="text" id="fim" name="fim" class="login requerido birth" style="width:90px" /></td>
                                        <td>Agrupado</td>
                                        <td>
                                            <select id="agrupamento" name="agrupamento" class="login" style="width:200px">
                                                <option value="grupo">Grupo</option>
                                                <option value="vendedor">Vendedor</option>
                                                <option value="cliente">Cliente</option>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Grupo:</td>
                                        <td>
                                            <select id="grupo" name="grupo" class="login" style="width:200px">
                                                <option value="">Selecione</option>
                                                @foreach (var item in combo.Grupo().OrderBy(ordem => ordem.DESCRICAO))
                                                {
                                                    <option value="@item.IDPRODGRUPO">@item.DESCRICAO</option>
                                                }
                                            </select>
                                        </td>
                                        <td>Sub Grupo:</td>
                                        <td>
                                            <select id="subgrupo" name="subgrupo" class="login" style="width:200px">
                                                <option value="">Selecione</option>
                                                @foreach (var item in combo.SubGrupo().OrderBy(ordem2 => ordem2.DESCRICAO))
                                                {
                                                    <option value="@item.IDSUBGRUPO">@item.DESCRICAO</option>
                                                }
                                            </select>
                                        </td>
                                        <td>Fabricante:</td>
                                        <td>
                                            <select id="fabricante" name="fabricante" class="login" style="width:200px">
                                                <option value="">Selecione</option>
                                                @foreach (var item in combo.Fabricante().OrderBy(m => m.NOMERAZAO))
                                                {
                                                    <option value="@item.IDFABRICANTE">@item.NOMERAZAO</option>
                                                }
                                            </select>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Codigo de Barras</td>
                                        <td><input type="text" id="codigoinicio" name="codigoinicio" class="login" style="width:90px" /></td>
                                        <td>a</td>
                                        <td><input type="text" id="codigofim" name="codigofim" class="login" style="width:90px" /></td>
                                    </tr>
                                    <tr>


                            <td>Cliente:</td>
                            <td>
                               @using (Html.BeginForm())
                               {
                                @Html.TextBox("dados", null, new { id = "cliente" });
                                <input type="submit" value="Procurar" />
                                }                            
                            </td>

Where I’m trying to use this autocomplete is on the last line of code with id Client and the elemento html td Client

My Jquery function is on the first line, there at the beginning ! With Getclientesjson

My ControllerVendasPorProduto and the Action of this View and the JsonResultwhich returns the data to this View is like this:

        [HttpPost]
        public ActionResult Movimentacao_Total_Vendas(ReportsMovimentacaoTotalVendas dados)
        {
            ReportsData report = new ReportsData();
            report.MovimentacaoTotalVendas(dados);
            return View();
        }


        [HttpPost]
        public JsonResult GetClientesJson(string term)
        {
            ComboData BDGetClientesJson = new ComboData();
            List<string> nomes;

            nomes = BDGetClientesJson.Cliente().Where(x => x.CLIENTE.StartsWith(term)).Select(c => c.CLIENTE).ToList();

            return Json(nomes,JsonRequestBehavior.AllowGet);
        }

Well, with all this following a few steps around it is not returning me the data in the field, nor showing the names of Customers as user type! Nothing returns to me, as I said first time I use this autocomplete. Could you tell me what’s wrong and I would like a code solution based on what I’ve shown !

Answer 1

It seems little, but try to remove the "," after the action

$("#cliente").autocomplete({
    source: '@Url.Action("GetClientesJson",)',
    minLength: 1
});

And you’re sure you added the jquery-ui with the library for autocomplete ? And yes, the [HttpPost] should not be added to the method, since you are not specifying to be via Post, for the deafult is Get.

If it still doesn’t work, mount a JSON in hand and add this to the Source. Because then you have a starting point to realize where the error is, on the server or client.