带有子项的 jQuery-ui 自动完成答案

【问题标题】：jQuery-ui Autocomplete with subitems带有子项的 jQuery-ui 自动完成
【发布时间】：2018-08-15 07:23:39
【问题描述】：

我正在尝试使用建议旁边显示的额外信息来实现自动完成。每当我将鼠标悬停在该项目上时，它应该会显示有关项目的一些额外详细信息。

我尝试使用自动完成的动态位置添加额外的 div，但没有成功。

如果有人有任何想法，我会全力以赴！

谢谢

【问题讨论】：

标签： jquery jquery-ui jquery-ui-autocomplete

【解决方案1】：

您可以在此处查看 -> https://jqueryui.com/autocomplete/#custom-data，了解如何创建带有额外信息的 jQuery UI 自动完成功能。（确保使用它们定义的名称“label、desc”等）。

使用所需信息创建 jquery ui 自动完成后，您可以使用 jquery .hover() 显示所需的信息（以防您不喜欢 UI 页面上的默认示例）。 https://api.jquery.com/hover/

编辑：只是为了让您更容易理解，而不是在 UI 自动完成时附加 item.desc，您可以使用悬停（item.desc）

我说的是这部分代码->

.autocomplete( "instance" )._renderItem = function( ul, item ) {
  return $( "<li>" )
    .append( "<div>" + item.label + "<br>" + item.desc + "</div>" )
    .appendTo( ul );

【讨论】：