是什么导致 Jquery UI 自动完成在添加方法时抛出 TypeError_renderMenu？

What is causing Jquery UI autocomplete to throw a TypeError when _renderMenu method is added?

提问人：www.matemingler.com 提问时间：10/22/2023 最后编辑：Ouroboruswww.matemingler.com 更新时间：10/22/2023 访问量：29

问：

我得到一个，添加方法后菜单没有显示。当我删除该方法时，它起作用了;但是，我想调整菜单的默认外观。我不知道是什么原因导致了错误，并希望得到任何帮助。代码如下：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>.
jquery jquery-ui

评论

答：

1赞 user2314737 10/22/2023 #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>

评论

0赞 www.matemingler.com 10/22/2023
我使用了你的代码，除了指向jquery的CDN的链接，因为我已经有了，而且它起作用了。你能详细解释一下你的代码吗，这样我就知道我做错了什么？感谢您的帮助。
0赞 user2314737 10/22/2023
@www.matemingler.com 我不确定您的代码中出了什么问题，因为问题中缺少 HTML。也许拼写错误？$( "#automplete" )

上一个：为什么我的选择元素没有更改选项？

下一个：JQuery 拆分 div 问题