Question

我正在尝试使用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值？

Answer 1

这个怎么样：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>

P.S。事实上，这么多代码实际上让我搜索曲目并实际播放它们，这让我大吃一惊。互联网是......太棒了。：）

Answer 2

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

$("#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);
    }
});

它也有一个缓存机制： - ）

使用jQuery Autocomplete返回多个值

2 个答案: