在ASP.NET中实现自动完成（Autocomplete）功能，可以使用jQuery UI的Autocomplete插件。以下是一个简单的示例，展示了如何在ASP.NET Web Forms应用程序中实现自动完成功能。
首先，确保在项目中引用了jQuery和jQuery UI库。你可以在_Layout.cshtml文件中添加以下引用：
<!DOCTYPE html>
<html>
<head>
<title>ASP.NET Autocomplete Example</title>
<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.min.js"></script>
</head>
<body>
<!-- Your content here -->
</body>
</html>
在你的ASPX页面中创建一个输入框，用于显示自动完成建议：
<asp:TextBox ID="txtAutocomplete" runat="server" CssClass="ui-widget-content ui-corner-all"></asp:TextBox>
在你的ASPX页面中添加JavaScript代码，初始化Autocomplete插件：
<script type="text/javascript">
$(document).ready(function () {
$("#<%= txtAutocomplete.ClientID %>").autocomplete({
source: ["Apple", "Banana", "Cherry", "Date", "Elderberry", "Fig", "Grape"],
minLength: 2
});
});
</script>
你可以根据需要调整Autocomplete的样式。jQuery UI提供了丰富的主题和样式选项。你可以在_Layout.cshtml文件中添加一些自定义样式：
<style type="text/css">
.ui-autocomplete {
max-height: 200px;
overflow-y: auto;
overflow-x: hidden;
z-index: 9999;
}
</style>
以下是一个完整的示例，展示了如何在ASP.NET Web Forms应用程序中实现自动完成功能：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AutoCompleteExample.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>ASP.NET Autocomplete Example</title>
<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.min.js"></script>
<style type="text/css">
.ui-autocomplete {
max-height: 200px;
overflow-y: auto;
overflow-x: hidden;
z-index: 9999;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtAutocomplete" runat="server" CssClass="ui-widget-content ui-corner-all"></asp:TextBox>
</div>
</form>
<script type="text/javascript">
$(document).ready(function () {
$("#<%= txtAutocomplete.ClientID %>").autocomplete({
source: ["Apple", "Banana", "Cherry", "Date", "Elderberry", "Fig", "Grape"],
minLength: 2
});
});
</script>
</body>
</html>
如果你需要从后端获取数据，可以在JavaScript中调用后端方法。例如，你可以在Default.aspx.cs文件中添加一个方法：
using System;
using System.Web.UI;
namespace AutoCompleteExample
{
public partial class Default : Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
// 初始化Autocomplete
txtAutocomplete.Attributes.Add("autocomplete", "off");
txtAutocomplete.Attributes.Add("class", "ui-widget-content ui-corner-all");
}
}
[WebMethod]
public static string[] GetAutocompleteData()
{
return new string[] { "Apple", "Banana", "Cherry", "Date", "Elderberry", "Fig", "Grape" };
}
}
}
然后在JavaScript中调用这个方法：
$(document).ready(function () {
$("#<%= txtAutocomplete.ClientID %>").autocomplete({
source: function (request, response) {
$.ajax({
url: '<%= ResolveUrl("~/Default.aspx/GetAutocompleteData") %>',
data: { term: request.term },
dataType: "json",
success: function (data) {
response($.map(data.d, function (item) {
return item;
}));
}
});
},
minLength: 2
});
});
这样，你就可以在ASP.NET Web Forms应用程序中实现自动完成功能了。
