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

Posted 2023-04-15

【中文标题】使用 jQuery 自动完成返回多个值

【英文标题】：Return more than just one value with jQuery Autocomplete

【发布时间】：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 链接

为什么不直接记录并查看对象中的内容？

因为我不知道该怎么做大声笑我会做一个谷歌搜索

【参考方案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);
    
);

它也有缓存机制:-)