javascript - 第二次调用 Function 时，Jquery Autocomplete _renderItem 不起作用

Question

我想生成两个输入字段，并带有生成图标的自动完成功能。我使用了 _renderItem 但意识到 - 通过使用单个类为多个输入字段调用自动完成 - 第二个字段不会调用 _renderItem 函数:

请参见此处:

var $project = $('.project');


var projects = [{
    value: "jquery",
    label: "jQuery",
    desc: "the write less, do more, JavaScript library",
    icon: "jquery_32x32.png"
  },
  {
    value: "jquery-ui",
    label: "jQuery UI",
    desc: "the official user interface library for jQuery",
    icon: "jqueryui_32x32.png"
  },
  {
    value: "sizzlejs",
    label: "Sizzle JS",
    desc: "a pure-JavaScript CSS selector engine",
    icon: "sizzlejs_32x32.png"
  }
];

$project.autocomplete({
  minLength: 0,
  source: projects,
  focus: function(event, ui) {
    this.val(ui.item.label);
    return false;
  }
});

$project.data("ui-autocomplete")._renderItem = function(ul, item) {

  var $li = $('<li>'),
    $img = $('<img>');


  $img.attr({
    src: 'https://jqueryui.com/resources/demos/autocomplete/images/' + 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);
};

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<link href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>

<div id="project-label">This one works:</div>
<input class="project">
<br />
<br />
<br />
<br />

<div id="project-label">This one does not show Images in the List:</div>
<input class="project">

为什么在第二个自动完成输入字段中没有显示图像。我怎样才能让它工作。 由于在我的网站中，我使用 php 自动生成字段，并且总体上只有一个自动完成功能，因此我通过类调用自动完成功能。还有另一种可能吗？谢谢你的帮助。

Answer 1

用 each 包裹它即可因此它将调用集合中的每个项目。

_{Iterate over a jQuery object, executing a function for each matched element.}

var $project = $('.project');


var projects = [{
    value: "jquery",
    label: "jQuery",
    desc: "the write less, do more, JavaScript library",
    icon: "jquery_32x32.png"
  },
  {
    value: "jquery-ui",
    label: "jQuery UI",
    desc: "the official user interface library for jQuery",
    icon: "jqueryui_32x32.png"
  },
  {
    value: "sizzlejs",
    label: "Sizzle JS",
    desc: "a pure-JavaScript CSS selector engine",
    icon: "sizzlejs_32x32.png"
  }
];

$project.autocomplete({
  minLength: 0,
  source: projects,
  focus: function(event, ui) {
    this.val(ui.item.label);
    return false;
  }
});

$project.each(function() {
  var $proj = $(this);
  
  $proj.data("ui-autocomplete")._renderItem = function(ul, item) {
    var $li = $('<li>'),
      $img = $('<img>');


    $img.attr({
      src: 'https://jqueryui.com/resources/demos/autocomplete/images/' + 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);
  };
});

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<link href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>

<div id="project-label">This one works:</div>
<input class="project">
<br />
<br />
<br />
<br />

<div id="project-label">This one does not show Images in the List:</div>
<input class="project">