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