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

Question

我是一个初学者&我试图发展与ASP.Net MVC 5.自动完成搜索框，我使用Northwind数据库和Entity Framework 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); 
    } 
} 

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

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