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

Question

我正在使用带有Ajax AutoComplete 的Jquery 来返回一些数据，但我有点卡在显示文本上。 这就是我所拥有的：

<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,
                        }
                    }))
                }
            })
        },
    });
});

在控制器上：

   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);

    }

在视图中：

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

它确实有效，但是当我选择一个项目时，文本框的文本成为我表中的键号。有没有办法当我选择某些东西时，文本保留为 item.remetente 但将 item.ID 的数量保存到表中？

Answer 1

您可以在'select' 的帮助下完成 试试下面的方法

你的看法

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

在您的 jquery 中定义将隐藏和文本框 id 作为参数的通用函数

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,
                        }
                    }))
                }
            })
        },
    });

  }

在document ready调用上面的函数

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

</script>

希望这能解决您的问题。我没有测试过。如果您遇到任何问题，请告诉我