Autocomplete jQuery-ui does not show data in Html.TextBox

0

I want to use jQuery ui Autocomplete in a MVC C # application that uses a WCF service.

In my controller I make the call to the service and the service consults the database and everything goes well, the controller receives the letter that the user enters, the controller calls the WCF service that goes to the database and returns me a list strongly typed with the information I need depending on the letter entered.

my problem is that it does not show me the results in the @ html.textbox (I use razor as view engine) and then I do not understand what I do wrong, they could help me, this is my vision code

<script type="text/javascript">
    $(document).ready(function () {
        $("#SearchString").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '@Url.Action(actionName: "autocompletar", controllerName: "Borrar")',
                    type: "POST",
                    dataType: "json",
                    data: { prefix: request.term },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return { value: item.Id, label: item.name };
                        }))
                    }
                })
            },
            select: function (event, ui) {
                $("#numeroPatronal").val(ui.item.value);
                $("#SearchString").val(ui.item.label);
                event.preventDefault();
                return false;
            },
            focus: function (event, ui) {
                $("#numeroPatronal").val(ui.item.value);
                event.preventDefault();
                return false;
            },
            messages: {
                noResults: "", results: ""
            }
        });
    });
</script>

these are the fields of the form

<div class="container col-md-10 col-md-offset-3">
    @using (Html.BeginForm())
    {
   <p> Empresa: @Html.TextBox("SearchString") </p>
   <p> Número Patronal: @Html.TextBox("numeroPatronal") </p>
<input type="submit" value="submit" />
    }
</div>

and this is the autocomplete action of the Clear controller

 public JsonResult autocompletar(string prefix)
        {
            List<GFC_Site.ViewModels.EmpresaAutocomplete> listado = new List<GFC_Site.ViewModels.EmpresaAutocomplete>();
            ProxyGFC.ServiceGFCClient cliente = new ProxyGFC.ServiceGFCClient();
            List<WcfService.Entidades.EmpresaAutocomplete> listadoBase = new List<WcfService.Entidades.EmpresaAutocomplete>();
            listadoBase = cliente.Autocompletar(prefix);
            foreach (var item in listadoBase)
            {
                GFC_Site.ViewModels.EmpresaAutocomplete dato = new ViewModels.EmpresaAutocomplete();
                dato.empresa = item.empresa;
                dato.np = item.np;
                listado.Add(dato);
            }
            return Json(listado, JsonRequestBehavior.AllowGet);

        }
    
asked by 29.05.2017 в 18:46
source

1 answer

0

I recommend you find out about chosen.jquery that already does what you want, you just have to load a complete list and pass it in a ViewBag, and in the view by just assigning the class "select" already makes example:

@Html.DropDownList("VisitanteId", null, String.Empty, new { @class = "form-control inline select" })

and you call the function       $ (". select"). chosen ();

If you do not like that idea in your example, I think you would need to render the list in a Partial and call it in your javascript with UpdateTargetId

    
answered by 29.05.2017 / 19:33
source