如何使用jQuery UI自动完成扩展程序进行文本搜索

时间:2014-05-22 10:38:43

标签: javascript jquery web-services

我正在使用jQuery UI Auto Complete扩展程序来填充列表。 在这里,我将此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;
    }
}

问题是没有检测到此文本框没有显示结果。

1 个答案:

答案 0 :(得分: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变量