ASP.Net MVC + 自动完成搜索不起作用

Question

我是初学者，我正在尝试使用 ASP.Net MVC 5 开发一个自动完成搜索框。我使用 Northwind 数据库和实体框架 6。

这是我的 index.cshtml 代码

@model IEnumerable<AutoComplete3.Models.Customers>

<link href="~/Content/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-ui.js"></script>

<script type="text/javascript">
    $(function () {
        $("#txtSearch").autocomplete({
            source: '@Url.Action("GetCustomers")'
        });
    });
</script>

@using (@Html.BeginForm())
{
    <b>Name : </b>
    @Html.TextBox("searchTerm", null, new { @id = "txtSearch" })
    <input type="submit" value="Search" />
}

这是我的 CustomerController 类

public class CustomersController : Controller
{
    northwindEntities db = new northwindEntities();

    public ActionResult Index()
    {
       return View(db.Customers);
    }

    [HttpPost]
    public ActionResult Index(string SearchTerm)
    {
        List<Customers> customers;
        if (string.IsNullOrEmpty(SearchTerm))
        {
            customers = db.Customers.ToList();
        }
        else
        {
            customers = db.Customers.Where(c => c.CompanyName.StartsWith(SearchTerm)).ToList();
        }
        return View(customers);
    }       

    public JsonResult GetCustomers(string term)
    {
        List<string> customers;
        customers = db.Customers.Where(c => c.CompanyName.StartsWith(term)).Select(y => y.CompanyName).ToList();
        return Json(customers,JsonRequestBehavior.AllowGet);
    }
}

当我通过输入关键字并单击提交按钮搜索记录时，此代码正在工作。但是 jquery 脚本不能调用 GetCustomer 方法。检查元素显示以下错误。

Uncaught TypeError: $(...).autocomplete is not a function

文本框应向文本框本身建议公司名称。如何纠正这个问题。

谢谢。

Answer 1

Javascript

    $(document).ready(function () {
        $("#txtSearch").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '@Url.Action("GetCustomers","Home")',
                    type: "POST",
                    dataType: "json",
                    data: { searchTerm: request.term },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return { label: item.CompanyName, value: item.CompanyName };
                        }))

                    }
                })
            },
            messages: {
                noResults: "", results: ""
            },
        });
    })

查看

@using (@Html.BeginForm())
{
    <b>Name : </b>
    @Html.TextBox("searchTerm", null, new { @id = "txtSearch" })
    <input type="submit" value="Search" />
}

控制器

请使用 [HttpPost] 更新您的控制器

    [HttpPost]
    public JsonResult GetCustomers(string searchTerm)
    {
    List<string> customers;
    customers = db.Customers.Where(c => c.CompanyName.StartsWith(term)).Select(y => y.CompanyName).ToList();
    return Json(customers,JsonRequestBehavior.AllowGet);
  }