带有Json的jQuery UI自动完成功能未显示建议

Question

I'm experiencing some troubles with an autocomplete component from jQueryUi. The list with autocomplete suggestions doesn't appear.

I've tested the following code (from jQuery UI ) and, despite servlet is sending a JSON object and "data" variable is storying it, component is still not showing suggestions list.

Also I tried the component with a simple list as source ( like here ), and it worked fine.

Have you any idea on what would be happening?

<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 object used in testing (I tried the stuff with a simple jSon built with just a String refering to "name" property, with the same [bad] results):

[
  {
    "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
      }
    }
  }
]

Answer 1

The autocomplete widget expects each item in your array to have a label property, a value property, or both. Since your data does not have either, you can either:

1. Tweak your server-side data source to return items that meet that criteria, or
2. Transform the data from your server-side code to match the criteria after you make the request.

I can only provide an answer to #2 since I don't see your server-side code, so here's how you would do that:

$(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);
            });
        }
    });
});

Here's an example that fakes an AJAX request--other than that it should be similar to your situation.