jQuery UI 自动完成焦点事件

jQuery UI 自动完成插件是一个功能强大的工具，它可以帮助你在输入框中自动完成用户输入的内容。它允许你自定义下拉菜单，还可以在用户选择某个项时执行一些代码。

开始使用

要使用 jQuery UI 自动完成插件，首先需要引入相关的 CSS 和 JS 文件：

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

然后，在你的 HTML 页面中添加一个输入框：

<input type="text" id="my-input">

最后，在你的 JS 代码中初始化自动完成插件：

$("#my-input").autocomplete({
  source: ["apple", "banana", "cherry"] // 下拉菜单的数据源
});

现在，当用户在输入框中输入内容时，就会出现一个下拉菜单，里面包含了 "apple"、"banana" 和 "cherry" 这三个选项。当用户选择其中一个选项时，jQuery UI 会自动将这个选项的值填充到输入框中。

自定义下拉菜单

除了默认的下拉菜单外，你还可以自定义下拉菜单。例如，你可以在每个选项前面添加一个图标，或者调整下拉菜单的样式。最常用的方式就是指定一个渲染函数（_renderItem），在函数中返回一个自定义的 HTML 模板：

$("#my-input").autocomplete({
  source: ["apple", "banana", "cherry"],
  _renderItem: function(ul, item) {
    var $li = $("<li>");
    var $img = $("<img>").attr("src", "https://www.example.com/" + item.value + ".jpg");
    var $span = $("<span>").text(item.label);
    return $li.append($img).append($span).appendTo(ul);
  }
});

在这个例子中，我们为每个选项添加了一个图片和一个文本标签，用来展示每个选项的内容。其中 item 参数是当前选项的数据。

焦点事件

jQuery UI 还提供了一些选项，用来控制自动完成插件的行为。其中一个重要的选项就是 focus，它指定了当用户在下拉菜单中移动光标时，要执行的操作。默认情况下，当用户移动到下拉菜单中的某个选项时，输入框中的文字会被该选项的值替换。

你可以通过指定 focus 选项来改变这个行为。例如，下面的代码将在用户移动光标时，在控制台中输出选项的值：

$("#my-input").autocomplete({
  source: ["apple", "banana", "cherry"],
  focus: function(event, ui) {
    console.log(ui.item.value);
    return false;
  }
});

在这个例子中，我们使用 console.log 函数将选项的值输出到浏览器的控制台中。注意，我们还返回了 false，这是为了阻止自动完成插件默认的行为。

总结

通过使用 jQuery UI 自动完成插件，你可以轻松地为输入框添加自动完成功能。插件允许你自定义下拉菜单，并在用户选择某个选项时执行一些代码，非常方便实用。同时，你还可以通过指定 focus 选项来控制插件的行为。