2

我正在尝试使用 jQuery 自动完成小部件从 spotify api 返回轨道“href”值。这是我的代码：

    $(function() {
    $("#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, ui) {
                    return el.name;
                }));
            });
        },
        select: function(el, ui) {
            alert(ui.item.href);
        }
    });
});​

响应网址：http ://ws.spotify.com/search/1/track.json?q=time

在当前状态下，它会发出警报[object Object]。我需要做什么才能返回 href 值？

4

2 回答 2

3

这个怎么样：http: //jsfiddle.net/MMPTC/

   $(function() {
    $("#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(item) {
                    return {label: item.name, track: item};
                }));
            });
        },
        select: function(el, ui) {
                console.log(ui);
            $("#track").attr("href",ui.item.track.href).text("Listen");
        }
    });
});​

<input type="text" id="spotify_song_search">
<a id='track'></a>​

PS 这么多代码实际上让我可以搜索曲目并实际播放它们，这让我大吃一惊。互联网是......真棒。:)

于 2012-06-10T03:57:19.113 回答
3

这是我使用的一个示例，我在调用时返回了一些值以在页面的其他位置使用

$("#SearchField").autocomplete({
    source: function (request, response) {
        var term = request.term;
        if (term in entityCache) {
            response(entityCache[term]);
            return;
        }
        if (entitiesXhr != null) {
            entitiesXhr.abort();
        }
        $.ajax({
            url: actionUrl,
            data: request,
            type: "GET",
            contentType: "application/json; charset=utf-8",
            timeout: 10000,
            dataType: "json",
            success: function (data) {
                response($.map(data, function (item) {
                    return { label: item.SchoolName, value: item.EntityName, id: item.EntityID, code: item.EntityCode };
                }));
            }
        });
    },
    minLength: 3,
    select: function (event, result) {
        $("#EntityID").val(result.item.id);
        $("#Code").val(result.item.code);
    }
});

它也有一个缓存机制:-)

于 2012-06-10T04:00:28.010 回答