使用 jQuery UI 实现自动完成功能是一个非常常见的需求，它可以提供给用户在输入框中输入内容时，根据输入的关键字自动展示匹配的选项，方便用户选择。然而，在默认情况下，当用户鼠标悬停在自动完成菜单上时，菜单会消失，给用户带来一些不便。本文将介绍一种解决这个问题的方法，并提供一个案例代码来演示。
在 jQuery UI 的自动完成插件中，菜单消失的原因是因为鼠标悬停在菜单上时触发了菜单的关闭事件。为了解决这个问题，我们可以通过监听鼠标事件，判断鼠标是否在菜单上，如果是，则取消关闭菜单的操作。首先，我们需要给自动完成菜单添加一个唯一的 ID，这样我们可以通过该 ID 来选择菜单元素。假设我们给菜单添加的 ID 是 "autocomplete-menu"。接下来，我们可以使用 jQuery 的 .on() 方法来监听鼠标移入和移出菜单的事件。当鼠标移入菜单时，我们需要取消关闭菜单的操作，而当鼠标移出菜单时，我们需要重新启用关闭菜单的操作。代码如下：javascript$(document).on("mouseenter", "#autocomplete-menu", function() { $(this).data("ui-autocomplete").menu.element.off("mouseleave").on("mouseleave", function() { $(this).menu("close"); });});$(document).on("mouseleave", "#autocomplete-menu", function() { $(this).data("ui-autocomplete").menu.element.off("mouseleave");});在上面的代码中，我们首先使用 .on() 方法来监听鼠标移入菜单的事件。在事件处理函数中，我们使用 $(this).data("ui-autocomplete").menu.element 来选择菜单元素，并使用 .off() 方法先取消原有的鼠标移出事件监听。接着，我们使用 .on() 方法来监听菜单元素的鼠标移出事件。在事件处理函数中，我们调用 $(this).menu("close") 来关闭菜单。最后，我们还需要添加一个监听鼠标移出菜单的事件的处理函数，用于在鼠标移出菜单时重新启用关闭菜单的操作。在事件处理函数中，我们使用 .off() 方法来取消菜单元素的鼠标移出事件监听。通过以上的代码，我们成功地解决了鼠标悬停时菜单消失的问题。下面的案例代码将演示完整的实现过程。案例代码：html效果演示：当鼠标悬停在自动完成菜单上时，菜单不会消失，用户可以继续选择选项。通过以上的案例代码，我们成功地解决了 jQuery UI 自动完成插件中鼠标悬停时菜单消失的问题。这种解决方法可以提升用户体验，使用户在选择选项时更加方便。希望本文对您有所帮助！jQuery UI Autocomplete