0

jQueryUi のオートコンプリート コンポーネントで問題が発生しています。オートコンプリート候補のリストは表示されません。

次のコード ( jQuery UIから) をテストしましたが、サーブレットが JSON オブジェクトを送信し、「データ」変数がそれを記述しているにもかかわらず、コンポーネントはまだ提案リストを表示していません。

また、ソースとして単純なリスト（here など）を使用してコンポーネントを試してみましたが、正常に機能しました。

何が起こるかについて何か考えがありますか？

<script>
$(function() {
         var cache = {};
            $( "#bear" ).autocomplete({
                minLength: 2,
                source: function( request, response ) {

                var term = request.term;                
                if ( term in cache ) {
                     response( cache[ term ] );
                     return;
                }

                $.getJSON( "/animals/MaintainMamals?operation=14", request, function( data, status, xhr ) {
                  cache[ term ] = data;
                  response( data );
                });

              }
            });
          });
</script>

<form>
    <div class="ui-widget">
       <label for="bear">Bear name (type a piece of name): </label>
       <input id="bear" name="bear" class="text ui-widget-content ui-corner-all"/>
    </div>
</form>

テストで使用された Json オブジェクト (「名前」プロパティを参照する文字列だけで構築された単純な jSon で試してみましたが、同じ [悪い] 結果が得られました):

[
  {
    "id": 1234567,
    "name": "Yogi Bear",
    "activity": {
      "handler": {
        "interfaces": [
          {}
        ],
        "constructed": true,
        "persistentClass": {},
        "getIdentifierMethod": {
          "clazz": {},
          "slot": 2,
          "name": "getCod",
          "returnType": {},
          "parameterTypes": [],
          "exceptionTypes": [],
          "modifiers": 1,
          "root": {
            "clazz": {},
            "slot": 2,
            "name": "getId",
            "returnType": {},
            "parameterTypes": [],
            "exceptionTypes": [],
            "modifiers": 1,
            "override": false
          },
          "override": false
        },
        "setIdentifierMethod": {
          "clazz": {},
          "slot": 3,
          "name": "setId",
          "returnType": {},
          "parameterTypes": [
            {}
          ],
          "exceptionTypes": [],
          "modifiers": 1,
          "root": {
            "clazz": {},
            "slot": 3,
            "name": "setId",
            "returnType": {},
            "parameterTypes": [
              {}
            ],
            "exceptionTypes": [],
            "modifiers": 1,
            "override": false
          },
          "override": false
        },
        "overridesEquals": false,
        "entityName": "com.zoo.Activity",
        "id": 7105,
        "initialized": false,
        "readOnly": false,
        "unwrap": false
      }
    }
  }
]
4

1 に答える 1

4

オートコンプリート ウィジェットは、配列内の各項目にlabelプロパティ、valueプロパティ、またはその両方があることを想定しています。データにはどちらも含まれていないため、次のいずれかを実行できます。

  1. サーバー側のデータ ソースを微調整して、その基準を満たすアイテムを返すか、または
  2. 要求を行った後、条件に一致するようにサーバー側コードからデータを変換します。

サーバー側のコードが表示されないため、#2 に対する回答しか提供できません。その方法は次のとおりです。

$(function() {
    var cache = {};

    $( "#bear" ).autocomplete({
        minLength: 2,
        source: function( request, response ) {
            var term = request.term;                
            if (term in cache) {
                 response(cache[ term ]);
                 return;
            }

            $.getJSON("/animals/MaintainMamals?operation=14", request, function (data, status, xhr) {
                /* Add a `label` property to each item */
                $.each(data, function (_, item) {
                    item.label = item.name;
                });

                cache[term] = data;
                response(data);
            });
        }
    });
});

これは、AJAX リクエストを偽造する例です。それ以外は、状況に似ているはずです。

于 2013-04-17T14:26:57.277 に答える