C# AJAX實(shí)現(xiàn)搜索自動補(bǔ)全功能

發(fā)布時間：2024-09-09 13:59:55 來源：億速云閱讀：82 作者：小樊欄目：編程語言

要在C#中使用AJAX實(shí)現(xiàn)搜索自動補(bǔ)全功能，你需要創(chuàng)建一個Web方法來處理搜索請求并返回建議列表。以下是一個簡單的示例：

首先，在你的ASP.NET項(xiàng)目中創(chuàng)建一個新的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>

在SearchAutoComplete.aspx.cs文件中添加以下C#代碼：

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)
    {
        // 這里可以從數(shù)據(jù)庫或其他數(shù)據(jù)源獲取搜索建議
        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();
    }
}

現(xiàn)在，當(dāng)用戶在搜索框中輸入至少兩個字符時，將顯示與輸入內(nèi)容匹配的搜索建議。請注意，這個示例使用了一個簡單的字符串列表作為搜索建議的數(shù)據(jù)源。在實(shí)際應(yīng)用中，你可能需要從數(shù)據(jù)庫或其他數(shù)據(jù)源獲取搜索建議。

向AI問一下細(xì)節(jié)

C# AJAX實(shí)現(xiàn)搜索自動補(bǔ)全功能

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽