使用json数据的jQueryUI + ASP .NET MVC自动完成

使用JSON数据的jQuery UI Autocomplete 是一个基于jQuery UI的自动完成插件，它可以轻松地将自动完成功能添加到ASP .NET MVC应用程序中。以下是一个完整的示例，说明如何使用JSON数据的jQuery UI Autocomplete。

首先，确保已经在项目中引入了jQuery和jQuery UI库。可以在项目的_Layout.cshtml文件中添加以下代码：

<head>
    ...
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
   <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.js"></script>
    ...
</head>

在ASP .NET MVC控制器中创建一个Action，该Action将返回JSON数据。例如，在HomeController中创建一个名为GetCities的Action：

public class HomeController : Controller
{
    public ActionResult GetCities(string term)
    {
        var cities = new[] { "New York", "London", "Paris", "Tokyo", "Sydney" };
        var filteredCities = cities.Where(x => x.StartsWith(term, StringComparison.OrdinalIgnoreCase)).ToList();
        return Json(filteredCities, JsonRequestBehavior.AllowGet);
    }
}

在ASP .NET MVC视图中添加一个输入框，并使用jQuery UI Autocomplete插件绑定JSON数据：

    $(function() {
        $("#city-autocomplete").autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: "@Url.Action("GetCities", "Home")",
                    type: "GET",
                    dataType: "json",
                    data: { term: request.term },
                    success: function(data) {
                        response(data);
                    }
                });
            },
            minLength: 2
        });
    });
</script>

在这个示例中，我们使用jQuery UI Autocomplete插件将输入框绑定到ASP .NET MVC控制器中返回的JSON数据。当用户在输入框中输入至少两个字符时，控制器的GetCities Action将被调用，并返回与输入字符匹配的城市列表。然后，jQuery UI Autocomplete将显示这些城市作为自动完成建议。

这个示例使用了jQuery UI Autocomplete插件，它是一个非常流行的JavaScript库，可以轻松地将自动完成功能添加到ASP .NET MVC应用程序中。此外，它还支持远程数据源，可以从服务器端返回JSON数据。这使得它非常适合与ASP .NET MVC一起使用，并且可以轻松地扩展到其他云计算平台。