自动完成Ajax asp.net MVC，显示文字

Question

I am using Jquery with Ajax AutoComplete to return some data, but I'm kind of stuck with the display text. This is what I have:

<script type="text/javascript">
$(document).ready(function () {
    $("#locais").autocomplete({
    source: function (request, response) {
            $.ajax({
                url: '@Url.Action("CreateF")',
                datatype: "json",
                data: {

                    s_localidade: request.term
                },
                success: function (data) {
                    response($.map(data, function (item) {
                        return {
                            label: item.remetente,
                            value: item.ID,
                        }
                    }))
                }
            })
        },
    });
});

And on controller:

   public JsonResult CreateF(string s_localidade)
    {
        var tblOficiosExpedidos = db.tblOficiosExpedidos.Include(t => t.tblLocalidades);
        var local = (from r in db.tblLocalidades
                     where r.Remetente.Contains(s_localidade.ToUpper())
                     select new { remetente = r.Remetente + " - " + r.Cidade, ID = r.LocalidadeID }).ToList();
         return Json(local, JsonRequestBehavior.AllowGet);

    }

On View:

@Html.TextBox("LocalidadeID","", htmlAttributes: new { @class = "form-control", @id="locais"})

It does work, but when i select an item, the text of the text box becomes the key number from my table. Is there a way to when i select something, the text keep as item.remetente but saves the number of item.ID into table?

Answer 1

You can do with the help of 'select' try below approach

Your view

@Html.TextBox("LocalidadeID","", htmlAttributes: new { @class = "form-control", @id="locais"})
@Html.Hidden("hiddenlocais")

In your jquery define common function that takes both hidden and text box id as parameters

JQuery:

function WireUpAutoComplete(displayControlId, valueControlId)
 {
  $(displayControlId).autocomplete({
    source: function (request, response) {
            $.ajax({
                url: '@Url.Action("CreateF")',
                datatype: "json",
                data: {
                    s_localidade: request.term
                },
                 select: function (event, ui) {
                      $(displayControlId).val(ui.item.Remetente);
                      $(valueControlId).val(ui.item.ID);
                    return false;
               },  
                success: function (data) {
                    response($.map(data, function (item) {
                        return {
                            label: item.remetente,
                            value: item.ID,
                        }
                    }))
                }
            })
        },
    });

  }

In document ready call above function

<script type="text/javascript">
$(document).ready(function () {
  WireUpAutoComplete("#locais", "#hiddenlocais");
});

</script>

hope this solve your problem. i haven't tested. let me know if you face any problems