要在C#中使用AJAX实现搜索自动补全功能，你需要创建一个Web方法来处理搜索请求并返回建议列表。以下是一个简单的示例：
首先，在你的ASP.NET项目中创建一个新的Web Forms页面（例如：SearchAutoComplete.aspx）。
在SearchAutoComplete.aspx页面中添加以下HTML代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Search Auto Complete</title>
<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://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<label for="txtSearch">Search:</label>
<input type="text" id="txtSearch" />
</div>
</form>
<script>
$(document).ready(function () {
$("#txtSearch").autocomplete({
source: function (request, response) {
$.ajax({
url: "SearchAutoComplete.aspx/GetSearchSuggestions",
data: JSON.stringify({ searchTerm: request.term }),
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item,
value: item
};
}));
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("Error: " + textStatus + ": " + errorThrown);
}
});
},
minLength: 2
});
});
</script>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class SearchAutoComplete : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static List<string> GetSearchSuggestions(string searchTerm)
{
// 这里可以从数据库或其他数据源获取搜索建议
List<string> suggestions = new List<string>
{
"Apple",
"Banana",
"Cherry",
"Date",
"Elderberry",
"Fig",
"Grape",
"Honeydew",
"Ice cream",
"Jackfruit",
"Kiwi",
"Lemon",
"Mango",
"Nectarine",
"Orange",
"Peach",
"Raspberry",
"Strawberry",
"Tomato",
"Ugli fruit",
"Victoria plum",
"Watermelon",
"Xigua melon",
"Yellow watermelon",
"Zucchini"
};
return suggestions.Where(s => s.ToLower().StartsWith(searchTerm.ToLower())).ToList();
}
}
现在，当用户在搜索框中输入至少两个字符时，将显示与输入内容匹配的搜索建议。请注意，这个示例使用了一个简单的字符串列表作为搜索建议的数据源。在实际应用中，你可能需要从数据库或其他数据源获取搜索建议。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
