0

jQuery UI AutoComplete ウィジェットを WebForms アプリケーションのリモート データ ソースと連携させようとしています。Web サービスの呼び出しに成功しましたが、返されたアイテムのリストがコントロールによってポップアップ表示されません。

ここに私のマークアップがあります:

<p>
    <label for="birds" class="fieldLabel">Company:</label>
    <input id="existingProgramCompanyName" type="text" style="width: 350px" />
</p>

そして、ここに私のスクリプトがあります：

$("#existingProgramCompanyName").autocomplete({
    source: "/Services/ProgramListServices.asmx/FilteredProgramList",
    minLength: 3,
    select: function (event, ui) {
        alert('Got it!');
    }
});

過去にこれを行ったときはいつでも、私の最大の問題は正しい形式でデータを返すことでした。AutoComplete ウィジェットは JSON を必要とするため、コードが有効な JSON を返すようにするのにかなりの時間を費やしました。Web サービスから返される実際の文字列は次のとおりです。

{
  "Companies":[{"Id":"1","Value":"First","Label":"First"},
               {"Id":"2","Value":"Second","Label":"Second"},
               {"Id":"3","Value":"Third","Label":"Third"}],
  "HasData":true,"Message":"","Success":true
}

それは有効なJSONですか？

コントロールは、アニメーション化された小さな読み込みイメージを正しく表示します。Web サービスが呼び出され、エラーなしで返されます。しかし、AutoComplete コントロールがリストをポップアップ表示することはありません。

私がこれまでに持っているものに何か問題があると思いますか? そして、これをトラブルシューティングするための次のステップは何ですか?

4

1 に答える 1

1

はい、文字列は有効な JSON ですが、AutoComplete がそれを消費できるという意味ではありません。フォーマットはAutocomplete Widget Sourceで確認できます。これは特にソースのケースに当てはまると思います：

* An array of strings: [ "Choice1", "Choice2" ]
* An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ]

フィードが生成するものは、括弧で囲むかどうかに関係なく、期待どおりに機能しません (括弧が必要です)。

$("#existingProgramCompanyName").autocomplete({
    source: {"Companies": [{ "Id": "1", "Value": "First", "Label": "First" },
        { "Id": "2", "Value": "Second", "Label": "Second" },
        { "Id": "3", "Value": "Third", "Label": "Third"}],
        "HasData": true, "Message": "", "Success": true
        }
    });

ただし、このわずかに変更されたバージョンは次のようになります (大文字と小文字が小文字であることに注意してください)。

 $("#existingProgramCompanyName").autocomplete({
     source: [{ "value": "First", "label": "First" },
              { "value": "Second", "label": "Second" },
              { "value": "Third", "label": "Third"}]
     });

したがって、修正するには、JSON フィードを微調整して、別の形式を出力します。

更新:おそらく、テスト用に文字列オプションの配列を試してみてください:

List<string> s = new List<string>();
//populate the list
return new JavaScriptSerializer().Serialize(s);
于 2013-10-03T18:42:10.393 に答える