j查询自动完成视图说明



我想在我的自动完成输入中包含描述。我是一个菜鸟,但我确信只有一些东西缺失或需要改变的东西。我在 JSFiddle 中的代码 https://jsfiddle.net/5ydkg1r2/2/

(function($){
var $project = $('#name');
var projects = [
{
  value: "Example 1",
  label: "Example 1",
  desc: "Example Description 1",
  icon: "1.jpg"
},
{
  value: "Example 2",
  label: "Example 2",
  desc: "Example Description 2",
  icon: "2.jpg"
},
];
$project.autocomplete({
minLength: 0,
matchCase : true,
source: projects,
focus: function( event, ui ) {
  $project.val( ui.item.label );
  return false;
}
 });
$project.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
var $li = $('<li>'),
    $img = $('<img>');
$img.attr({
  src: 'http://www.gstatic.com/webp/gallery/' + item.icon,
  alt: item.label
});
$li.attr('data-value', item.label);
$li.append('<a href="#">');
$li.find('a').append($img).append(item.label);    
return $li.appendTo(ul);
};
})(jQuery);

您还需要附加项目描述。
所以替换这个:

$li.find('a').append($img).append(item.label);

通过这个:

$li.find('a').append($img).append(item.label).append(item.desc);

最新更新