jquery - jQuery自动完成多个_renderItem

Question

我希望自动完成给我的建议不仅出现在输入字段下方的下拉列表中。所以我想在两个容器中展示当前的建议。

  $( "#project" ).autocomplete({
    minLength: 0,
    source: projects,
    focus: function( event, ui ) {
      $( "#project" ).val( ui.item.land );
      return false;
    },
    select: function( event, ui ) {
      $( "#project" ).val( ui.item.jurisdiction );
      //$( "#project-id" ).val( ui.item.value );
      $( "#project-description" ).html( ui.item.company );

      return false;
    },
    change: function( event, ui ) {
      $('#resultsDistributor').html("");
    }
  })
  .autocomplete( "instance" )._renderItem = function( ul, item ) {
    return $( "<li>" )
      .append( "<div>" + item.company + "<br>" + item.jurisdiction + "</div>" )
      .appendTo( ul );
  };

_renderItem 正在做下拉菜单。在以下绝对错误的示例中，我的意图变得更加清楚。

[...]
  .autocomplete( "instance" )._renderItem = function( ul, item ) {
    return $( "<li>" )
      .append( "<div>" + item.company + "<br>" + item.jurisdiction + "</div>" )
      .appendTo( ul );
    return $( "#resultDistributor" )
      .append( "<div>" + item.company + "<br>" + item.jurisdiction + "</div>" );
  };

Answer 1

我找到了解决方案。不知道是不是最好的可能。有一个名为 create 的事件。

create: function() {
  $(this).data('ui-autocomplete')._renderItem = function (ul, item) {
    $( "<li>" )
    .append( "<div>" + item.company + "<br>" + item.phone + "</div>" )
    .appendTo( "#resultsDistributor" );
    return $( "<li>" )
    .append( "<div>" + item.company + "<br>" + item.jurisdiction + "</div>" )
    .appendTo( ul );
  };

Answer 2

你可以试试，改变这一行

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

到下线

.each(function(idx, ele) {
    $(ele).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
    return $( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( item.label )
        .appendTo( ul );
    }
});