jQuery UI 使用 ashx 处理程序重新填充自动完成文本框

Question

对发布第 100 亿个 jQuery 自动完成问题表示歉意...

我在使用 jQuery UI 自动完成文本框时遇到问题。 我不确定我是否在客户端做正确的事情以在击键后重新填充自动完成数据源。

我的aspx页面中的javascript如下：

$(function() {
    $("#<%=txtAuthorityName.ClientID%>").autocomplete({
        minLength: 2,
        delay: 0,
        dataType: "json",
        search: function(data) {
            $.getJSON("AuthoritySearchHandler.ashx?SearchTerms=" + $("#<%=txtAuthorityName.ClientID%>").val() + "&AuthorityType=" + $("#<%=ddlSector.ClientID%>").val(), function(data) {
                $("#<%=txtAuthorityName.ClientID%>").autocomplete("option", "source", data);
            })
        }
    });
});

我的 ashx 处理程序中的代码如下：

    public void ProcessRequest(HttpContext context)
    {
        string searchTerms = context.Request["SearchTerms"] ?? string.Empty;
        string authorityType = context.Request["AuthorityType"];
        int authorityTypeId = 0;
        string json = "";
        if (int.TryParse(authorityType, out authorityTypeId) && authorityTypeId > 0 && searchTerms.Length > 0)
        {
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            var authorities = from a in BusinessLayer.SearchAuthorities(authorityTypeId, searchTerms)
                              select a.Name;
            json = serializer.Serialize(authorities);
        }
        context.Response.ContentType = "application/json";
        context.Response.Write(json);
        context.Response.End();
    }

我相当确定 ashx 处理程序正在做它应该做的事情（我已经使用 fiddler 检查了 HTTP 响应以确保）。我收到错误“Microsoft JScript 运行时错误：预期对象”？

Answer 1

不要完全偏离你的方向，但你的处理程序可能会更好地实现和作为 WebMethod 使用（即，如果你在多个页面上重用结果生成方法或作为页面方法使用 Web 服务如果仅在单个页面上使用，则在单个页面上）。

这里有完整的 Web 服务指南：http://encosia.com/2008/03/27/using-jquery-to-consume-aspnet-json-web-services/

要使用与页面方法完全相同的服务，请查看：http://encosia.com/2008/05/29/using-jquery-to-directly-call-aspnet-ajax-page-methods/

我多次使用和滥用这些文章。

您可以按如下方式构建您的服务或页面方法（如果您使用页面方法，请将此函数声明为静态）：

[WebMethod]
public string[] GetSearchResults(int authorityTypeId, string searchTerms)
{
    if (authorityTypeId > 0 && searchTerms != string.Empty)
    {
        var authorities = from a in BusinessLayer.SearchAuthorities(authorityTypeId, searchTerms)
                          select a.Name;
        return authorities.ToArray();
    }
    else
    {
        return null;
    }
}

您可以将数据源更新绑定到搜索事件，如下所示：

$(function() {
    $("#<%=txtAuthorityName.ClientID%>").autocomplete({
        minLength: 2,
        delay: 0,
        dataType: "json",
        search: function(e, ui) {
            var $input = this;
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "/Path/To/Service/Or/page.aspx/GetSearchResults",
                data: "{authorityTypeId:"+ $("#<%=ddlSector.ClientID%>").val() + ",searchTerms:'" + $("#<%=txtAuthorityName.ClientID%>").val() + "'}",
                dataType: "json",
                success: function (result) {
                    $input.autocomplete("option", "source", result.d);
                }
            });
        }
    });
});

作为为您的 $.ajax() 调用手动构建数据成员的 JSON 字符串的替代方法，您可以构建一个数据对象并让浏览器的 JSON 对象为您字符串化。

var data = {};
data.authorityTypeId = parseInt($("#<%=ddlSector.ClientID%>").val());
data.searchTerms = $("#<%=txtAuthorityName.ClientID%>").val();

$.ajax({
    ...    

    data: JSON.stringify(data)    
});

请记住，IE 中对本机 JSON 对象的支持直到 IE8 才开始，因此您必须包含一个脚本才能为 IE7 等旧版浏览器构建它。

我没有使用 AutoComplete 的搜索事件绑定，但我已经通过异步回发绑定了页面加载时的数据源，因此下载包含一千多个可搜索名称的数据库不会阻止页面呈现。话虽如此，我不确定将数据源更新绑定到该事件会产生什么行为。我的第一直觉是在 $(document).ready() 期间绑定数据一次以获取所有名称并让自动完成对象为您进行过滤。