Question

我遇到了一些来自jQueryUi的自动完成组件的麻烦。带有自动填充建议的列表不会出现。

我已经测试了以下代码（来自jQuery UI），尽管servlet正在发送一个JSON对象而“data”变量正在故事中，但组件仍未显示建议列表。

此外，我尝试使用简单列表作为源（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 属性，或两者都有。由于您的数据也没有，您可以：

调整服务器端数据源以返回符合该条件的项目，或
在发出请求后，转换服务器端代码中的数据以符合条件。

我只能提供＃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 - 除此之外它应该与您的情况类似。

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

1 个答案: