2012-04-11 11 views
1

私はstackoverflowで同様の記事を集めましたが、どちらもうまくいきませんでした。私は、単純なAJAXを入力JSONデータをWCFメソッドに渡す方法jqueryオートコンプリート用のソースを設定する

[OperationContract] 
    public IEnumerable<string> GetCities(string prefix) 
    { 
     string[] cities = new[] { "New York", "Atlanta", "Los Angeles", "Las Vegas", "Arizona", "New Hampshire", "New England" }; 

     if(!String.IsNullOrEmpty(prefix)) 
     { 
      cities = cities.Where(a => a.ToLower().StartsWith(prefix.ToLower())).ToArray(); 
     } 

     return cities; 
    } 

に基づく都市は今、私はjqueryのUIのオートコンプリートを使用して、このメソッドへの呼び出しを行うためにしようとしている返すWCFサービスを有効にしています。問題は、メソッド呼び出しに接頭引数を渡す必要がありますが、私が接頭辞パラメータを試している間は、問合せ文字列としてurlに追加されます。ここにjQueryコードがあります。

$("input[type=text][id*=autocompleteBox]").autocomplete({ 
    source: function (request, response) { 
     var dataCity = {'prefix': request.term}; 
     $.ajax({ 
      url: "http://localhost:1939/Cities.svc/GetCities", 
      dataType: "json", 
      contentType: "application/json; charset=utf-8", 
      data: JSON.stringify(dataCity), 
      success: function (data) { 
       response($.map(data, function (item) { 
        return { 
         label: data 
        } 
       })); 
      } 
     }); 
    }, 
    minLength: 0 
}); 

リモートデータソースを呼び出す3つのオプションがあります。 最初のオプションは上記のコードですが、この方法でURLに追加されたJSON結果を文字列化しています。

私は単純にsourceオプションにurl of serviceを渡そうとしましたが、同じ結果が得られました(term = myinputがurlに追加されました)。

多くのエントリがあるため、3番目のオプション(ローカルデータを持つ配列)を使用することはできません。すべてをクライアントに保持したくありません。

サービスメソッドにプレフィックスパラメータを渡すにはどうすればよいですか?これは可能ですか、jquery UIのオートコンプリートウィジェットを使用することを選択した場合、URLを付加したパラメータを使用する必要がありますか?

答えて

1

実は、私はコード内のいくつかのミスを犯しました。返された結果をマップする必要があります。この場合はdata.dです。ここに作業コードがあります。

$("input[type=text][id*=autocompleteBox]").autocomplete({ 

     source: function (request, response) { 

      var data = { 'prefix': request.term}; 

      $.ajax({ 
       type: "POST", 
       url: "http://localhost:1939/Cities.svc/GetCities", 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       data: JSON.stringify(data), 
       processdata: true, 
       success: function (result) { 
        response($.map(result.d, function (item) { 
         return { 
          label: item 
         }; 
        })); 
       }, 
       error: function (er) { 
        alert(er); 
       } 
      }); 
     }, 
     minLength: 1, 
     open: function() { 
      $(this).removeClass("ui-corner-all").addClass("ui-corner-top"); 
     }, 
     close: function() { 
      $(this).removeClass("ui-corner-top").addClass("ui-corner-all"); 
     } 
    }); 
2

あなたのajaxコール(typeパラメータ)で指定されたHTTPメソッドが表示されないので、デフォルトはGETになり、GETにはコンテンツがありません。 GETを使用するときにデータを渡す唯一の方法は、URLパラメータを使用する方法です。 Btw。メソッドがデータを取得するだけなので、GET要求を使用する必要があります。

はので、代わりにJSONの、ちょうど送る:

var dataCity = "prefix=" + encodeURIComponent(request.term); 
+0

私はGETリクエストを使用してデータを取得する必要があるという考えに素早く応答しています。実際に私はコードでいくつかのエラーを作りました。特に、データの代わりにdata.dをマップする必要があります。私は答えとして完全なコードを投稿します。 – Michael

+0

Sryは、タイプパラメータを指定しなかったことを指摘してくれてありがとうございます。 – Michael

関連する問題