jQuery UI自动完成下拉菜单不显示

Question

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

没有下拉建议.例如,我正在搜索"时间",我想看到:

• 时间由Hans Zimmer < - (这是我正在寻找的)
• 由比特犬回到过去
• 通过大提升时间仓促

这是我的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中工作正常)