Мы переходим из bassistance.de autocomplete в автозаполнение jQuery UI. Я не могу найти столько примеров для версии jQuery UI, документация кажется немного разреженной. Это может быть только я.
Я хотел бы узнать, есть ли у кого-нибудь пример/учебник, в котором объясняется, как изменить внешний вид автозаполнения. Мой код выглядит следующим образом:
$( "#SearchInput" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "http://servername/index.pl",
dataType: "json",
data: {
term: request.term
},
success: function( data ) {
response( $.map( data.items, function( item ) {
return {
label: item.id + " - " + item.label,
value: item.id
}
}));
}
});
},
});
Это работает, я получаю, что идентификатор и ярлык отображаются отдельно от дефиса. В идеале я хотел бы знать, как отформатировать результаты. Я бы хотел, чтобы идентификатор был ниже идентификатора метки. Если возможно, я хотел бы знать, как отображать изображение справа от текста.
Если у кого-то есть указатели на то, как этого достичь, я был бы умен.
На веб-сайте JqueryUI есть документация о том, как настроить макет результатов: http://jqueryui.com/demos/autocomplete/#custom-data.
Пример:
$( "#SearchInput" ).autocomplete({ .... }).data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + "<img src='" + item.imgsrc + "' />" + item.id+ " - " + item.label+ "</a>" )
.appendTo( ul );
};