2

当您开始在文本字段中输入他们的名字时，我正在使用他们的 JqueryUI 自动完成插件返回一个自动建议的音乐艺术家列表。我使用 Echo Nest API 作为数据源。

我目前使用的代码如下：-

 jQuery.ajaxSetup({cache:true});
    $("#form-field-influence .text" ).autocomplete({
            source: function( request, response ) {
                $.ajax({
                    url: "http://developer.echonest.com/api/v4/artist/suggest",
                    dataType: "jsonp",
                    data: {
                        results: 12,
                        api_key: "my_API_key",
                        format:"jsonp",
                        name:request.term
                    },
                    success: function( data ) {
                        response( $.map( data.response.artists, function(item) {
                            return {
                                label: item.name,
                                value: item.name,
                                id: item.id
                            }
                        }));
                    }
                });
            },
            minLength: 1,
            delay: 0,
            select: function( event, ui ) {
                $("#log").empty();
                $("#log").append(ui.item ? ui.item.id + ' ' + ui.item.label : '(nothing)');
            },
        });

现在，虽然这完美地工作并给了我一个自动完成列表，但我需要把它变成一个多选字段，允许我基本上“标记”用户希望的尽可能多的艺术家。

我发现了几个提供此功能的插件。最近我一直在玩“tokenInput”插件。但是这个插件希望数据以特定格式返回......像这样： -

[
    {"id":"856","name":"House"},
    {"id":"1035","name":"Desperate Housewives"},
    ...
]

我一直在使用这个简单的行来初始化插件：-

   $("#form-field-influence .text").tokenInput(

"http://developer.echonest.com/api/v4/artist/suggest?api_key=my_API_key"

);

但是，当我设置 tokenInput 来读取 JSONP 数据源时，结果返回如下：-

{"response": {"status": {"version": "4.2", "code": 0, "message": "Success"}, "artists": [{"name": "Hold A Candle To This (Alternate Version) (Re-mastered for 'Pirate Radio')", "id": "SOFXGAE12A58A787E3"}, {"name": "Radiohead", "id": "ARH6W4X1187B99274F"}, {"name": "Radio Moscow", "id": "AR3O0021187B999BC8"}, {"name": "The Radio Dept.", "id": "AREKO1L1187B997EFE"}, {"name": "TV on the Radio", "id": "AR0PK561187B9B9EF9"}, {"name": "Joshua Radin", "id": "ARPCRYQ1187FB4ECB8"}, {"name": "The One AM Radio", "id": "ARSHZ531187B99B36F"}, {"name": "Radaid", "id": "ARVGZWZ12086C11298"}, {"name": "New Radicals", "id": "ARL4UQB1187B9B74E3"}, {"name": "Go Radio", "id": "ARQCFYC12A10043E5B"}, {"name": "Radio Slave", "id": "ARKVKKG1187FB3B49A"}, {"name": "Red City Radio", "id": "ARYDXLV11EB9C82776"}, {"name": "Radio Radio", "id": "ARJUCSZ11F4C83E301"}, {"name": "Radikal Guru", "id": "ARCHBIP123526A0E1B"}, {"name": "Radium", "id": "AR8ZGW31187B99F0E5"}]}}

如您所见，我想要的数据嵌套在“艺术家”对象中。因此插件（以及我尝试过的任何其他替代方案）不会读取数据并将其显示在下拉列表中。

有什么办法可以让这个数据源与 tokenInput 插件一起工作？或者，是否有任何其他“自动完成标记”插件能够实现此功能？

非常感谢！

4

1 回答 1

0

http://static.echonest.com/samples/suggest/ArtistSuggestAutoComplete.html :-)

于 2012-05-21T09:30:44.893 回答