添加 _renderMenu 方法时，是什么导致 Jquery UI 自动完成抛出 TypeError？

Question

我得到一个

TypeError

并且添加

_renderMenu

方法后菜单没有显示。当我删除该方法时，它起作用了；但是，我想调整菜单的默认外观。我不知道是什么导致了错误，希望得到任何帮助。这是代码：

$.widget( 'ui.autocomplete', $.ui.autocomplete, {
           _renderMenu : function ( ul, items ) {
        }
    });
    var tags  =  [
       "Books",
       "Magazines",
       "Poems"
    ];
    $( "#automplete" ).autocomplete({
       source: tags
    });

这是错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'value')
    at x.<computed>.<computed>.menufocus 
    at HTMLUListElement.i 
    at HTMLUListElement.dispatch 
    at v.handle 
    at Object.trigger
    at HTMLUListElement.<anonymous>
    at Function.each 
    at e.<computed>.each 
    at e.<computed>.trigger
    at x.<computed>.<computed>.

Answer 1

请检查这个：

$.widget('ui.autocomplete', $.ui.autocomplete, {
  _renderMenu: function(ul, items) {}
});


var tags = [
  "Books",
  "Magazines",
  "Poems"
];

$("#autocomplete").autocomplete({
  source: tags
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js" integrity="sha256-lSjKY0/srUM9BE3dPm+c4fBo1dky2v27Gdjm2uoZaL0=" crossorigin="anonymous"></script>

<div>
  <label for="tags">Tags: </label>
  <input id="autocomplete">
</div>

完整的工作示例：

$.widget('ui.autocomplete', $.ui.autocomplete, {
  _renderMenu: function(ul, items) {
    var that = this;  
    $.each(items, function(index, item) {
      that._renderItemData( ul, item );
    })
  },
  _renderItem: function(ul, item) {
  return $( "<li>" )
    .attr( "data-value", item.value )
    .append("<em>" + item.label + "</em>")
    .appendTo( ul );
  }
});


var tags = [
  "Books",
  "Magazines",
  "Poems"
];

$("#autocomplete").autocomplete({
  source: tags
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js" integrity="sha256-lSjKY0/srUM9BE3dPm+c4fBo1dky2v27Gdjm2uoZaL0=" crossorigin="anonymous"></script>

<div>
  <label for="tags">Tags: </label>
  <input id="autocomplete">
</div>