jQuery自动完成多个_renderItem答案

【问题标题】：jQuery autocomplete multiple _renderItemjQuery自动完成多个_renderItem
【发布时间】：2018-06-17 06:57:06
【问题描述】：

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

  $( "#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>" );
  };

【问题讨论】：

标签： jquery autocomplete multiple-results

【解决方案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 );
  };

【讨论】：

【解决方案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 );
    }
});

【讨论】：