jQueryのUI ASHXハンドラで再移入オートコンプリートテキストボックス10億jQueryのオートコンプリート質問を投稿するための

Question

謝罪...

私は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ハンドラが何をやっているかなり確信していますそれは（私はHTTPレスポンスを確かめるためにフィドラーを使って調べた）。エラー "Microsoft JScript実行時エラー：オブジェクトが必要です"が表示されます。

Answer 1

あなたがこれを行っていた方向を完全に捨てないでくださいが、ハンドラがWebMethodとしてよりよく実装され、消費される可能性があります（結果生成メソッドを複数のページやページとして再利用する場合メソッドが1つのページにのみ使用されている場合）

完全ハウツーここで、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); 
       } 
      }); 
     } 
    }); 
}); 

データメンバーのJSON文字列を$ .ajax（）呼び出し用に手動で作成する代わりに、データオブジェクトを作成して、ブラウザのJSONオブジェクトを文字列化することもできます。あなたはIE7などの古いブラウザのためにそれを構築するためのスクリプトを含める必要があるだろうので

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

$.ajax({ 
    ...  

    data: JSON.stringify(data)  
}); 

IEでのネイティブJSONオブジェクトのサポートを覚えておいてくださいは、ごく最近IE8などとして始まりました。

私はオートコンプリートの検索イベントバインディングを使用していませんが、ページ上のデータソースを非同期ポストバックによってバインドしているため、1000個を超える検索可能な名前のデータベースをダウンロードすることによってページのレンダリングがブロックされません。つまり、データソース更新をそのイベントにバインドする動作がどのように生成されるのかはわかりません。私の最初の本能は、$（document）.ready（）中に一度データを束縛してすべての名前を取得し、オートコンプリートオブジェクトにフィルタリングをさせることです。