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包裹它，就可以调用集合中的每个项目。

_{遍历jQuery对象，为每个匹配的元素执行一个函数。}

＆＃13;

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);
  };
});

＆＃13;

<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">

＆＃13;

当第二次调用Function时，Jquery自动完成_renderItem不起作用

1 个答案: