jQuery autocomplete multiple _renderItem

Question

I would like the suggestions that autocomplete gives me not only appear in the dropdown below the input field. So I want to show the current suggestions in two containers.

  $( "#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 is doing the dropdown. In the following, absolutely wrong example, it becomes clearer what I intend.

[...]
  .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

You can try, Change this line

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

to below lines

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

Answer 2

I found a solution. Don't know if it's the best possibility. There is a Event called 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 );
  };