Question

我正在使用Jquery和Ajax AutoComplete来返回一些数据，但我对显示文本感到困惑。这就是我所拥有的：

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

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

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

1 个答案: