jQuery UI 自动完成源选项

jQuery UI 自动完成源选项是一个基于 jQuery UI 的插件，用于实现输入框的自动完成功能。该插件允许你通过 AJAX 或本地数组来指定要自动完成的条目。

特性

• 支持本地和远程数据源
• 可自定义下拉选项的外观和行为
• 支持键盘导航和输入过滤
• 可配置多个数据源

使用方法

加载 jQuery UI

在使用 jQuery UI 自动完成源选项插件之前，你需要先加载 jQuery 和 jQuery UI。你可以在 HTML 页面中引入它们：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>

定义输入框

定义一个输入框：

<input id="my-input">

初始化自动完成

要使用 jQuery UI 自动完成源选项插件，你需要初始化它。以下示例将从本地数组中获取数据：

$( "#my-input" ).autocomplete({
  source: [ "apple", "banana", "orange" ]
});

从远程数据源获取数据

要从远程数据源获取数据，你需要使用 AJAX。以下示例会向 /search.php 发送 GET 请求并获得 JSON 数据：

$( "#my-input" ).autocomplete({
  source: function( request, response ) {
    $.ajax({
      url: "/search.php",
      dataType: "json",
      data: {
        q: request.term
      },
      success: function( data ) {
        response( data );
      }
    });
  },
  minLength: 2
});

配置选项

以下是可用的选项：

• source：数据源，可以是本地数组或返回数据的远程 URL。
• minLength：触发自动完成的最小字符数，默认为 1。
• delay：等待用户停止输入的毫秒数，默认为 300。
• autoFocus：是否自动聚焦第一个选项，默认为 false。
• disabled：是否禁用自动完成，默认为 false。
• position：下拉选项的位置，默认为 { my: "left top", at: "left bottom", collision: "none" }。

事件

以下是可用的事件：

• create：在创建自动完成菜单之前触发。
• search：在搜索时触发。
• focus：在获得焦点时触发。
• select：在选择一个选项时触发。
• open：在打开自动完成菜单时触发。
• close：在关闭自动完成菜单时触发。