javascript - jQuery UI 自动完成下拉不显示

Question

我正在尝试使用 jQuery UI 自动完成功能来搜索 spotify 的音乐库。虽然一切顺利，但我确实得到了成功的回应:

没有下拉建议。例如，我正在搜索“时间”，我想看到:

• Time 汉斯季默 <--(这是我一直在寻找的)
• 回到时间 by Pitbull
• 通过大时间冲刺提升

等这是我的 JavaScript 代码:

<script>$(function() {$( "#spotify_song_search" ).autocomplete({source: function(request, response) {
        $.get("http://ws.spotify.com/search/1/track.json", { q: request.term },function( data ) { alert(data); response(data);});
    },success: function(data) {
            // pass your data to the response callback 
            alert(data); response(data);
        }});});</script> 

我一定是做错了什么。我还检查了这里的 jQuery 文档:http://jqueryui.com/demos/autocomplete/但它没有给出任何解释为什么会发生这种情况。我添加了警报以查看我是否至少会得到响应，我这样做了，但它只返回 [object Object]。我需要做什么才能显示搜索结果？

错误: Uncaught SyntaxError: Unexpected token ILLEGAL 第 417 行:

Answer 1

自动完成小部件期望数据以非常特定的方式进行格式化，以便可以对其进行解析。您提供或传递给 response 回调的数组必须是:

1. 包含字符串的数组，或
2. 包含具有label 属性、value 属性或两者的对象的数组。

(有关详细信息，请参阅“概述”/“预期数据格式”下的自动完成文档)

当您拥有无法更改的数据源时，执行此操作的典型方法是使用 $.map 将结果转换为自动完成所需的格式:

$("#spotify_song_search").autocomplete({
    source: function(request, response) {
        $.get("http://ws.spotify.com/search/1/track.json", {
            q: request.term
        }, function(data) {
            response($.map(data.tracks, function (el) {
                return el.name;
            }));
        });
    }
});

示例: http://jsfiddle.net/ANmUs/ (注意:目前这在 Firefox 中似乎不起作用；这可能是由于响应的大小。尽管在 Chrome 中它工作正常)