Question

我需要创建一个自动填充文本框来填充ASP.Net MVC应用程序中的客户名称。我视图中的jQuery代码如下：

$(document).ready(function() {
    $("input#bldCustomerName").autocomplete({
        source: '<%= Url.Action("ListCustomers","Build") %>'
    });
});

我的控制器操作是：

public ActionResult ListCustomers(string term)
    {
        IList<HSTrader> lstTraders = new List<HSTrader>();
        Build objBld = new Build();
        string trdrType = Resources.Resource.TraderTypeCustomer;
        int trdrTypeId = objBld.GetTraderTypeByTraderTypeName(trdrType).Id;
        lstTraders = objBld.GetTradersByTraderType(trdrTypeId);

        var results = from m in lstTraders
                      where m.TraderName.StartsWith(term)
                      select m.TraderName; //new { label = m.TraderName, id = m.Id };

        return Json(results.ToArray(), JsonRequestBehavior.AllowGet);
    }

在keypress上执行控制器操作，但列表不会出现在文本框下。我的实施有什么问题？

Answer 1

 $(document).ready(function () {
            $('input#bldCustomerName').autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: '/Build/ListCustomers', type: 'Get', dataType: 'json',
                        data: { term: request.term, maxResults: 10 },
                        success: function (data) {
                            response($.map(data, function (item) {
                                return { label: item.TraderName, value: item.TraderName, id: item.TraderName }

                                //return { label: item.d, value: item.d, id: item.d } 
                                //If it does not work then use this line. comment above line. it is for single dimension array (only one column.).
                            }))
                        }
                    });
                },
                select: function (event, ui) {

                }
            });
        });






        //BuildController
        [HttpGet]
        public JsonResult ListCustomers(string term, int maxResults)
        {
            IList<HSTrader> lstTraders = new List<HSTrader>();
            Build objBld = new Build();
            string trdrType = Resources.Resource.TraderTypeCustomer;
            int trdrTypeId = objBld.GetTraderTypeByTraderTypeName(trdrType).Id;
            lstTraders = objBld.GetTradersByTraderType(trdrTypeId);

            var results = from m in lstTraders
                          where m.TraderName.StartsWith(term)
                          select m.TraderName; //new { label = m.TraderName, id = m.Id };

            return Json(results.Take(maxResults).ToList(), JsonRequestBehavior.AllowGet);
        }

Answer 2

希望这有助于某人...

我不得不添加jquery-ui库和样式表，因为它们没有附带VS2013 Scripts模板。这是一个使用db查询和TextBoxFor自动完成的示例，它对我有用：

WordListController.cs：

public ActionResult Test2(MyModel vm)
{
    return View(vm);
}
public JsonResult AutoComplete(string search)
{
    var result = (from r in db.Words
                  where r.Word.ToLower().StartsWith(search.ToLower())
                  select r.Word).Take(10).ToArray();

    return Json(result, JsonRequestBehavior.AllowGet);
}

Test2.cshtml：

@{
    ViewBag.Title = "test2";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@Scripts.Render("~/bundles/jqueryui")
@Styles.Render("~/Content/jqueryuicss")

@model  WLWeb.Models.MyModel

<h2>test2</h2>

<script>

        $(function () {
            $('#tags').autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: '@Url.Action("AutoComplete", "WordList")',
                        dataType: "json",
                        contentType: 'application/json, charset=utf-8',
                        data: {
                            search: $("#tags").val()
                        },
                        success: function (data) {

                            response($.map(data, function (item) {
                                return {
                                    label: item
                                };
                            }));
                        },
                        error: function (xhr, status, error) {
                            alert(error);
                        }
                    });
                },
                minLength: 2
            });
        });

</script>

    @Html.TextBoxFor(x => Model.SelectionModel.SearchString, new { @id = "tags", style = "width:120px;" })

Layout.csthml：

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryval")

</head> 
<body>
...
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

BundleConfig.cs：

...
        bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                    "~/Scripts/jquery-ui-{version}.custom.js"));

        bundles.Add(new StyleBundle("~/Content/jqueryuicss").Include(
                  "~/Content/jquery-ui-{version}.custom.css"));

使用asp.net mvc中的jquery自动完成文本框的问题

2 个答案: