0

私はこのコードを動作させるのに2ヶ月間働いていますが、私は近いですが、まだ混乱しています。 JSONデータを返すWebサービスを呼び出して、そのデータを選択用に表示し、選択時に選択した値を非表示のフィールドに挿入するJQuery UIオートコンプリート関数が必要です。 1)オートコンプリート機能が 2を発射されていない)ソース:JSONを返すJQuery UIオートコンプリートWebServiceソース

いくつかの問題があります "?/AutoSuggest.asmx/DOTFindは"行は無効なオブジェクト例外を投げる 3)サービスは2つのパラメータを必要とします:(string prefixText、int count) - countは、返すレコードの数を示します。 <% @ページ言語=「C#の」AutoEventWireup属性=「true」をCodeFile = "Default2: 4)私は、このコードはバックサービスここ

から来てJSONデータを受け入れることを全く特定ないですがコードです.aspx.cs」継承= "Default2" %>

無題ページ

<script type="text/javascript"> 
    if ($) { 
     $(document).ready(
       function() { 
        $('h4').addClass('tmpFrameworkLoaded'); 
        $('h4').text('jQuery successfully loaded and running!'); 
       } 
      ); 
    } 

</script> 

<style> 
    .ui-autocomplete-loading 
    { 
     background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; 
    } 
</style> 
<div id="divDOTJQuery" runat="server"> 

    <script type="text/javascript"> 
     $(function() { 
      function log(message) { 
       alert(message); 
       $("<div/").text(message).prependTo("#log"); 
       $("#log").attr("scrollTop", 0); 
      } 
     }); 

     $("#dotmatch").autocomplete({ 
      source: "/AutoSuggest.asmx/DOTFind?", 
      minLength: 2, 
      select: function(event, ui) { 
       log(ui.item ? 
        "Selected: " + ui.item.value + " aka " + ui.item.id : 
        "Nothing selected, input was " + this.value); 
      } 
     }); 
    </script> 

    <div class="ui-widget"> 
     DOT Job Title or #: 
     <input type="text" id="dotmatch" /> 
     <input type="hidden" id="DOTNumber" name="DOTNumber" /> 
    </div> 
    <div class="ui-widget" style="margin-top: 2em; font-family: Arial"> 
     Results:<br /> 
     <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"> 
     </div> 
    </div> 
</div> 
</form> 

、ここでウェブサービスです:

[WebMethod(BufferResponse = true, Description = "Lookup a DOT record using part of DOT Number or DOT Title")] 
[ScriptMethod(ResponseFormat=ResponseFormat.Json)] 
public string DOTFind(string prefixText, int count) 
{ 
    if (count == 0) 
    { 
     count = 10; 
    } 
    DOT D = new DOT(); 

    DataView DV = D.View(prefixText, count); 
    List<DOT> items = new List<DOT>(); 
    foreach (DataRow DR in DV.Table.Rows) 
    { 
     items.Add(new DOT(SQL.ColumnToString(DR, "DOTNumber").Trim(),SQL.ColumnToString(DR, "JobTitle").Trim())); 
    } 
    DataContractJsonSerializer serializer = new DataContractJsonSerializer(items.GetType()); 
    MemoryStream ms = new MemoryStream(); 
    serializer.WriteObject(ms, items); 
    string jsonString = Encoding.Default.GetString(ms.ToArray()); 
    ms.Close(); 
    return jsonString; 
} 

私は深くあなたが提供することができますこれで任意の助けをいただければ幸いです。

おかげで、

ボブ

答えて

0

私はあなたが.autocomplete()は、Webサービスからapplication/jsonデータを期待するべきであると指定していません参照してください。 .autocomplete()への呼び出しでdataType: "json"を指定してください。

$("#dotmatch").autocomplete({ 
     source: "/AutoSuggest.asmx/DOTFind?", 
     minLength: 2, 
     dataType: "json" //specify dataType 
     select: function(event, ui) { 
      log(ui.item ? 
       "Selected: " + ui.item.value + " aka " + ui.item.id : 
       "Nothing selected, input was " + this.value); 
     } 
    }); 
+0

そのヒントをありがとう。機能はまだ起動していないので、テストできません。 –

+0

@Bob:ウェブサービスから返されたデータを他の方法で確認しましたか?つまり手動で '/AutoSuggest.asmx/DOTFind? 'かそれとも何かを呼び出すことによって? –

+0

はい - 私はwebserviceをチェックアウトして正常に動作します。今の問題は、私のオートコンプリート機能が起動していないことです。 –

0

オートコンプリートは、JSON、

はとてもパラメータコールバックを追加=?、またはあなたがcallback_value(YOUR_JSON)へのWebサービスのtryラップJSONで

$("#dotmatch").autocomplete({ 
    source: "/AutoSuggest.asmx/DOTFind?callback=?", 
    minLength: 2, 
    select: function(event, ui) { 
     log(ui.item ? 
      "Selected: " + ui.item.value + " aka " + ui.item.id : 
      "Nothing selected, input was " + this.value); 
    } 
}); 

が好きで何もしないで、JSONPを使用しています。

しかし、私はWebMethodsでパラメータを取得するかどうかわからないので、代わりにGeneric Handler(ashx)を使用することができます。

+0

実際、オートコンプリートはJSONまたはJSONPのいずれかを使用できます。 –

0

FireFoxとFireBugを使用したときに「発火しない」という問題が簡単に検出できることが判明しました。イベント発射ラインに問題が発生していることがわかりました。私はその行を調整したとき、それはOK発射を開始しました。次に、「GETを使用できません - POSTを使用する必要があります」や「返されるデータは「D」で始まる」などの一連の問題が発生しました。私はそれらのそれぞれを処理し、コードは現在動作します。私はそれをすべてクリーンアップすると、私はそれを書いて、結果をどこかに投稿するつもりです。多分ここに。

関連する問題