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服务在一个页面上，如果它只在那里使用。）

此处提供了完整的网络服务方法：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的搜索事件绑定，但是我已经通过asynch回发绑定了页面加载的数据源，因此不会通过下载超过一千个可搜索名称的数据库来阻止页面呈现。话虽这么说，我不确定会对该事件绑定数据源更新会产生什么样的行为。我的第一直觉是在$（document）.ready（）期间绑定数据一次以获取所有名称并让自动完成对象为您进行过滤。

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

1 个答案: