如何检测jQueryUI Autocomplete组件选项的失焦/模糊事件？

方案1：纯CSS实现（最推荐） #

jQuery UI Autocomplete 组件本身就会给当前悬浮/键盘选中的选项自动添加 ui-state-active 类，你完全不需要编写任何JS逻辑处理样式，直接覆盖对应的CSS规则即可，天然解决鼠标移出列表后的样式重置问题，也不会出现原有实现中:contains模糊匹配错误的bug。

你只需要在<head>中加入以下样式即可，原有JS代码中的focus事件可以完全删除：

.ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
  font-weight: bold;
}

修改后的完整示例代码如下：

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
    <style>
    .ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
        font-weight: bold;
    }
    </style>
    <script>
    $( function() {
        var availableTags = [
            "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion",
            "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python",
            "Ruby", "Scala", "Scheme"
        ];
        $( "#tags" ).autocomplete({
          source: availableTags
        });
    });
    </script>
</head>
<body>
<div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags">
</div>
</body>
</html>

方案2：JS优化实现（仅适合有特殊自定义逻辑的场景） #

如果你确实需要通过JS控制高亮逻辑，可以做两处优化解决现有问题：

1. 替换原有模糊匹配选择器，直接用组件自带的ui-state-active类定位当前选中项，避免匹配错误
2. 监听自动完成菜单的mouseleave事件，鼠标移出列表时重置所有选项样式

修改后的JS代码如下：

$( function() {
    var availableTags = [
        "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion",
        "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python",
        "Ruby", "Scala", "Scheme"
    ];
    $( "#tags" ).autocomplete({
        source: availableTags,
        // 组件创建完成时绑定菜单的鼠标移出事件
        create: function() {
            $(this).autocomplete("widget").on("mouseleave", function() {
                $(".ui-menu-item-wrapper").css("font-weight", "normal");
            });
        },
        focus: function( event, ui ) {
            $(".ui-menu-item-wrapper").css("font-weight", "normal");
            // 直接定位当前激活的选项，无需模糊匹配
            $(".ui-menu-item-wrapper.ui-state-active").css("font-weight", "bold");
        }
    });
});

内容的提问来源于stack exchange，提问作者Gowire