jQuery UI 自动完成选择事件

jQuery UI 是一个功能强大的 JavaScript 库，提供了许多实用的 UI 组件和交互功能。其中之一就是自动完成（autocomplete）组件，可以让用户在输入框中输入关键字后自动显示与之匹配的选项。

本篇文章将介绍如何在 jQuery UI 自动完成组件中添加选择事件。当用户选择某一项时，会触发该事件，开发者可以在事件回调函数中执行相应的操作。

HTML 结构

首先，需要在 HTML 中定义一个输入框和一个用于显示结果的区域，如下所示：

<label for="autocomplete">Search:</label>
<input type="text" id="autocomplete">
<div id="result"></div>

其中 label 标签用于描述输入框的目的，input 标签定义了一个带有 id 为 autocomplete 的输入框，div 标签用于显示搜索结果，具有 id 为 result。

JavaScript 代码

接下来，需要编写 JavaScript 代码，使用 jQuery UI 自动完成组件初始化输入框，并添加选择事件监听器。

$(function() {
  $("#autocomplete").autocomplete({
    source: ["Java", "JavaScript", "Python", "Ruby", "Scala"], // 可供选择的选项列表
    select: function(event, ui) { // 选择事件回调函数
      $("#result").html("You selected " + ui.item.value); // 显示选择结果
    }
  });
});

以上代码将在文档加载完成后执行。首先，调用 autocomplete 方法初始化输入框，并提供一个可供选择的选项列表。当用户输入关键字时，自动完成组件将在该列表中查找符合条件的选项，并显示在下拉菜单中。

在 autocomplete 方法的选项列表中，需要添加一个 select 属性，值为一个函数。这个函数就是选择事件回调函数，将在用户选择某一项时被触发。回调函数接收两个参数：event 和 ui。其中 event 是触发事件的事件源对象，ui 是一个对象，包含了所选项的信息，如值和标签等。

在回调函数中，可以执行一些操作来响应用户的选择。例如，将选择结果显示在 result 区域中，即 ui.item.value，该值即为所选项的值。

效果演示

最后，让我们来看一下效果。输入框中输入关键字，自动完成组件将展示符合条件的选项，并可以通过方向键或鼠标点击进行选择。选择完毕后，选择结果将显示在 result 区域中。

完整代码片段如下：

<label for="autocomplete">Search:</label>
<input type="text" id="autocomplete">
<div id="result"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
  $(function() {
    $("#autocomplete").autocomplete({
      source: ["Java", "JavaScript", "Python", "Ruby", "Scala"],
      select: function(event, ui) {
        $("#result").html("You selected " + ui.item.value);
      }
    });
  });
</script>

效果演示可以参考下方的 GIF 动画：