Json不显示建议的jQuery UI自动完成

Question

我在使用 jQueryUi 的自动完成组件时遇到了一些问题。不显示带有自动完成建议的列表。

我已经测试了以下代码（来自jQuery UI），尽管 servlet 正在发送 JSON 对象并且“数据”变量正在对其进行记录，但组件仍然没有显示建议列表。

我还尝试了使用简单列表作为源 (like 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 构建的东西，它只使用一个引用“name”属性的字符串，结果相同 [bad]）：

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

自动完成小部件希望数组中的每个项目都具有 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);
            });
        }
    });
});

Here's an example 伪造 AJAX 请求 - 除了它应该与您的情况相似。