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

jQuery自动完成多个_renderItem

2 个答案: