Question

在我的应用程序中，从自动填充文本框的下拉列表中选择一个值时，它只显示id而不是值我的代码在下面

[AcceptVerbs(HttpVerbs.Post)]
    public JsonResult Autocomplete(string term)
    {
        List<DemoModel> demo = new List<DemoModel>();
        demo.Add(new DemoModel(1, "one"));
        demo.Add(new DemoModel(2, "two"));
        return Json(demo, JsonRequestBehavior.AllowGet);
    }

我的观点

$(document).ready(function () {


    $("#PassId").autocomplete({
        source: function (request, response) {

            $.ajax({
                async: false,
                cache: false,
                type: "POST",
                url: "@(Url.Action("Autocomplete", "Home"))",
                data: { "term": request.term },
                success: function (data) {


                    response($.map(data, function (item) {

                        return { label: item.name, value: item.id };
                    }))
                },
                select: 
        function (event, ui) {

            $("#PassId").val(ui.item.label);
            return false;
        },

                focus: function(event, ui) {

                    $("#PassId").val(ui.item.label);
                    return false;
                }
            });
        }
    });
});

我在哪里做错了？感谢。

Answer 1

我猜之前：

}, // <-----before this
select:

你必须关闭ajax方法：

  }); //<----this closing of ajax is missing.
},
select:

或者我会说有语法错误，请检查：

$("#PassId").autocomplete({
  source: function(request, response) {

    $.ajax({
          async: false,
          cache: false,
          type: "POST",
          url: "@(Url.Action(" Autocomplete ", " Home "))",
          data: { "term": request.term },
          success: function(data) {
            response($.map(data, function(item) {
              return {
                label: item.name,
                value: item.id
              };
            }))
          });
      },
      select: function(event, ui) {

        $("#PassId").val(ui.item.label);
        return false;
      },

      focus: function(event, ui) {

        $("#PassId").val(ui.item.label);
        return false;
      } // <---you had a wrong closing here.
  }
});

Answer 2

该脚本结构需要一些修复，您可以在“源代码”功能的“选择”和“焦点”部分中找到

。

应该像这样：

$('#myAutocomplete').autocomplete({
    source: function (request, response) {
        $.ajax({
            // your ajax parameters
            success: function (data) {
               // your code
            }
        });
    },
    select: function (event, ui) {
       // code on select
    },
    focus: function (event, ui) {
       // code on focus
    }
});

jquery autocomplete在选择文本时显示id

2 个答案: