3

jQuery UI オートコンプリート機能を使用して、Spotify の音楽ライブラリを検索しようとしています。すべてがうまくいき、成功した応答が得られます。

jQuery オートコンプリート Spotify ソング検索

ドロップダウンの提案はありません。たとえば、「時間」を検索していて、見たいと思っていました:

  • ハンス・ジマーの時間<--(これは私が探していたものです)
  • ピットブルで時間をさかのぼる
  • ビッグタイムラッシュで昇格

など。ここに私の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 行目: ここに画像の説明を入力

4

1 に答える 1

5

オートコンプリートウィジェットは、データを解析できるように、非常に特殊な方法でデータがフォーマットされることを想定しています。コールバックに提供または渡す配列は、次のとおりである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では正常に機能します)

于 2012-06-05T13:47:40.570 に答える