我如何检测 jQueryUI 中自动完成项目的 blur/unfocus？

Question

我在 jQueryUI 中使用自动完成小部件，现在尝试对其进行一些自定义。

我想以自定义方式突出显示自动完成列表中悬停的项目。在下面的示例代码中，我使用 focus 事件将字体更改为粗体并查找所选元素，最后修改该元素的样式。

在将悬停的项目更改为粗体之前，我确保将所有其他项目重置为正常字体（否则，当悬停在下一个项目上时，前一个项目将保持粗体）。

它部分有效，但我不喜欢我的解决方案（我觉得它有点“丑陋”）。一个问题是，如果我将鼠标指针移到列表之外，它不会检测到它，并且最后一项将保持为粗体。见图：

我被困在这里了...如何以更好的方式检测模糊事件并从最后悬停的项目中删除粗体？这是我的示例代码：

    <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>
        <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,
            focus: function( event, ui ) {
                // Reset all list item fonts
                $(".ui-menu-item-wrapper").css("font-weight", "normal");

                // Find the element selected and make it bold
                selector = ".ui-menu-item-wrapper:contains(" + ui.item.label +")";
                $(selector).css("font-weight", "bold");
                },
            });
        });
        </script>
    </head>
    <body>
    
    <div class="ui-widget">
        <label for="tags">Tags: </label>
        <input id="tags">
    </div>
    
    
    </body>
    </html>

Answer 1

考虑以下 CSS 示例。

$(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
  });
});

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

<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>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

自动完成使用菜单，而菜单对项目使用 ui-state-active。使用正确的 CSS 选择器，您可以将突出显示的项目设为粗体。

我如何检测 jQueryUI 中自动完成项目的 blur/unfocus？

How do i detect blur/unfocus on autocomplete items in jQueryUI?

jquery-ui

jquery-ui-autocomplete