Question

我想在自动填充输入中包含说明。我是一个新手，但我确信只有一点点缺失或一些小改变。我的代码在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);

Answer 1

您还需要附加商品说明所以替换这个：

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

由此：

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

jQuery自动完成视图描述

1 个答案: