autocomplete在asp.net mvc中的应用_运维文库_资讯中心

发布时间:2026-04-28 14:22:23

阅读量:3

在ASP.NET MVC中，自动完成（Autocomplete）是一种提高用户体验的功能，它允许用户在输入时实时获取建议列表。这通常用于搜索、数据筛选等场景。要在ASP.NET MVC中实现自动完成功能，可以使用jQuery UI的Autocomplete插件。

以下是在ASP.NET MVC中实现自动完成的步骤：

引入必要的库文件

在项目中引入jQuery、jQuery UI和Bootstrap的库文件。将以下代码添加到_Layout.cshtml文件的部分：


<script src="https://code.jquery.com/jquery-3.6.0.min.js">script>


<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js">script>


<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事件。同时，引入一个用于存储自动完成建议的

<input type="text" id="product-suggestions" />
<ul id="suggestions">ul>

使用jQuery UI的Autocomplete插件