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

Question

我正在使用 Jquery 和 Ajax AutoComplete 到 return 一些数据，但我有点受困于显示文本。这是我的：

<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"})

它确实有效，但是当我 select 一个项目时，文本框的文本变成了我的 table 中的键号。有没有办法当我 select 的时候，文本保持 item.remetente 但将 item.ID 的数字保存到 table?

Answer 1

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

您的看法

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

在您的 jquery 中定义将隐藏框 ID 和文本框 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，显示文本

Autocomplete Ajax asp.net MVC, Display text

c#

ajax

jquery

asp.net-ajax

asp.net-mvc-5