javascript - 如何使用 jQuery UI 自动完成扩展器进行文本搜索

Question

我正在使用 jQuery UI 自动完成扩展器来填充列表。在这里我包括这个article有关我的代码详细信息的更多引用。

这里我修改了自动完成的方法。在文章中，这是从 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);
                    }
                })
            },
        });
 })

在代码中获取Tern变量