jQuery UI自动完成下拉不显示

Question

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

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

• Time，作者 Hans Zimmer
• 回到时间，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]。我需要做什么才能显示搜索结果？

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

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 中可以正常工作）