如何使用jQuery UI自動完成擴展器進行文本搜索

Question

我正在使用jQuery UI自動完成擴展程序填充列表。 在這里，我包括這篇文章，以供我的代碼詳細信息參考。

在這里，我修改了自動完成的方法。 在本文中，該調用來自css類，而我想要來自控件的ID。

這是我的jQuery腳本：

    <script type="text/javascript">
       $(document).ready(function () {
           SearchText();
       });
       function SearchText() {
           $("#<%=txt_reason.ClientID %>").autocomplete({
               source: function (request, response) {
                   $.ajax({
                       type: "POST",
                       contentType: "application/json; charset=utf-8",
                       url: "Raise_Ticket.aspx/SearchReasons",
                       data: "{'prefixText':'" + $("#<%=txt_reason.ClientID %>").val() + "'}",
                       dataType: "json",
                       success: function (data) {
                           response(data.d);
                       },
                       error: function (result) {
                           alert("Error");
                       }
                   });
               }
           });
       }
</script>

這是我的方法：

[System.Web.Script.Services.ScriptMethod(ResponseFormat = System.Web.Script.Services.ResponseFormat.Json)]
[System.Web.Services.WebMethod]
public static List<string> SearchReasons(string prefixText)
{
    using (DataClassesDataContext db = new DataClassesDataContext())
    {
        var query = db.Reasons.Where(r => r.ReasonText.Contains(prefixText)).Select(r => r).ToList();
        List<string> reasons = new List<string>();
        foreach (var item in query)
        {
            reasons.Add(item.ReasonText.ToString());
        }
        return reasons;
    }
}

問題是沒有檢測到此文本框未顯示結果。

Answer 1

用這個

<script type="text/javascript">
       $(document).ready(function () {
           SearchText();
       });
       function SearchText() {
           $("#txt_reason").autocomplete({
               source: function (request, response) {
                   $.ajax({
                       type: "POST",
                       contentType: "application/json; charset=utf-8",
                       url: "Raise_Ticket.aspx/SearchReasons",
                       data: "{'prefixText':'" + $("#txt_reason").val() + "'}",
                       dataType: "json",
                       success: function (data) {
                           response(data.d);
                       },
                       error: function (result) {
                           alert("Error");
                       }
                   });
               }
           });
       }
</script>

使用這個你也可以嘗試

$(document).ready(function () {
        $("#textbox").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "URL",
                    type: "POST",
                    dataType: "json",
                    data: { term: request.term },

                    success: function (retrieveddata) {
                        if (retrieveddata.length > 0) {
                    }
                    },
                    error: function (request, status, error) {
                        console.log("Error! " + request.responseText);
                    }
                })
            },
        });
 })

在代碼中使用燕鷗變量