自动完成 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>

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