Я использую их плагин автозаполнения 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"}]}}
Как вы можете видеть, данные, которые я хочу, вложены в объект 'Artist'. Поэтому плагин (и любая другая альтернатива, которую я пробовал) не читает данные и не отображает их в раскрывающемся списке.
Есть ли способ заставить этот источник данных работать с плагином tokenInput? В качестве альтернативы есть какие-либо другие плагины для «автозаполнения тегов», которые могли бы реализовать эту функцию?
Большое спасибо!