使用 jQuery 自动完成返回多个值答案

【问题标题】：Return more than just one value with jQuery Autocomplete使用 jQuery 自动完成返回多个值
【发布时间】：2012-06-13 12:50:24
【问题描述】：

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

【问题讨论】：

你能粘贴回复吗？
这里是回复的网址：ws.spotify.com/search/1/track.json?q=time
对不起，请确保它的 json 链接
为什么不直接记录并查看对象中的内容？
因为我不知道该怎么做大声笑我会做一个谷歌搜索

标签： jquery jquery-ui api autocomplete spotify

【解决方案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>

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

【讨论】：

【解决方案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);
    }
});

它也有缓存机制:-)

【讨论】：