如何检测 jQueryUI 中自动完成项目的模糊/不聚焦？答案

【问题标题】：How do i detect blur/unfocus on autocomplete items in jQueryUI?如何检测 jQueryUI 中自动完成项目的模糊/不聚焦？
【发布时间】：2021-11-26 16:31:54
【问题描述】：

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

【问题讨论】：

标签： jquery-ui jquery-ui-autocomplete

【解决方案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>

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

【讨论】：