在ASP.NET MVC中，自動完成（Autocomplete）是一種提高用戶體驗的功能，它允許用戶在輸入時實時獲取建議列表。這通常用于搜索、數據篩選等場景。要在ASP.NET MVC中實現自動完成功能，可以使用jQuery UI的Autocomplete插件。
以下是在ASP.NET MVC中實現自動完成的步驟：
在項目中引入jQuery、jQuery UI和Bootstrap的庫文件。將以下代碼添加到_Layout.cshtml文件的<head>部分：
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- jQuery UI -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
在控制器中創建一個方法，用于返回自動完成所需的數據。例如，假設我們有一個Products表，我們可以創建一個名為GetProductSuggestions的方法：
public class HomeController : Controller
{
private readonly ApplicationDbContext _context;
public HomeController(ApplicationDbContext context)
{
_context = context;
}
public ActionResult GetProductSuggestions(string term)
{
var products = _context.Products
.Where(p => p.Name.Contains(term))
.Take(10)
.ToList();
return Json(products, JsonRequestBehavior.AllowGet);
}
}
在需要實現自動完成的視圖（例如，Index.cshtml）中，添加一個輸入框，并為其添加ui-autocomplete類和autocomplete事件。同時，引入一個用于存儲自動完成建議的<ul>元素。
<input type="text" id="product-suggestions" />
<ul id="suggestions"></ul>
在視圖的<script>標簽中，編寫以下代碼以初始化自動完成功能：
$(document).ready(function () {
$("#product-suggestions").autocomplete({
source: function (request, response) {
$.ajax({
url: "/Home/GetProductSuggestions",
type: "GET",
dataType: "json",
data: { term: request.term },
success: function (data) {
response($.map(data, function (item) {
return {
label: item.Name,
value: item.Name
};
}));
}
});
},
minLength: 2,
select: function (event, ui) {
$("#product-suggestions").val(ui.item.label);
return false;
}
});
});
現在，當用戶在輸入框中輸入時，將自動顯示與輸入內容匹配的產品建議列表。用戶可以從列表中選擇一個建議，將其插入到輸入框中。
