Jquery ui jQuery UI自动完成，Json不显示建议

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

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

此外，我还尝试了一个简单列表作为source（）的组件，它工作得很好

你知道会发生什么事吗

<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>

---

“自动完成”小部件要求数组中的每个项都有一个

标签

属性、一个

值

属性，或者两者都有。由于您的数据没有这两个选项，您可以：

调整服务器端数据源以返回符合该条件的项，或

发出请求后，将服务器端代码中的数据转换为符合条件

我只能回答#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请求——除此之外，它应该与您的情况类似。

自动完成小部件希望数组中的每个项都有一个

标签

属性、一个

值

属性，或者两者都有。由于您的数据没有这两个选项，您可以：

调整服务器端数据源以返回符合该条件的项，或

发出请求后，将服务器端代码中的数据转换为符合条件

我只能回答#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请求——除此之外，它应该与您的情况类似。

为什么

之后的
源对象需要有一个label和/或value属性才能使用小部件。您可以转换数据，以便小部件使用它though@Mooseman，是因为防止stackOverflow页面将其解释为自己的标记。如果你能给我一个建议，让你以最好的方式完成这件事，我很乐意知道：）。@AndrewHitaker，我该怎么做？您有什么建议吗？为什么源对象的
后面的
“
需要有标签和/或值属性才能使用小部件。您可以转换数据，以便小部件使用它though@Mooseman，是因为防止stackOverflow页面将其解释为自己的标记。如果你能给我一个建议，让你以最好的方式完成这件事，我很乐意知道：）。@AndrewHitaker，我该怎么做？你有什么建议吗？谢谢你的回答。非常有价值，解决了我的问题。在StackOverflow中，我们确实需要更多这样的答案！谢谢你的小提琴@亚历克斯：没问题！很高兴这有帮助。哇，我为此挣扎了一个小时，直到看到这个答案。非常感谢。非常有用。对于任何寻找确切文档位置的人，请访问，谢谢您的回答。非常有价值，解决了我的问题。在StackOverflow中，我们确实需要更多这样的答案！谢谢你的小提琴@亚历克斯：没问题！很高兴这有帮助。哇，我为此挣扎了一个小时，直到看到这个答案。非常感谢。非常有用。如果您想查找确切的文档位置，请访问