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

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的东西只是一个字符串指的“名称”属性建，用相同的[衰]结果）：

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

的自动填充小部件会期望您阵列中的每个项目都具有属性，或属性，或属性。由于您的数据没有任何，您可以：

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 request--除此之外它应该与你的情况相似。