博客

如何在jQuery UI中启用autocomplete功能

  • Post category:jquery

在 jQuery UI 中，可以使用 autocomplete 方法来启用自动完成功能。在本教程中，将详细介绍如何在 jQuery UI 中启用 autocomplete。

步骤如下：

  1. 引入 jQuery UI 库文件

在 HTML 文件中，需要引 jQuery 和 jQuery UI 库文件可以使用以下代码：

<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>
  1. 创建 HTML框

在 HTML 文件中，需要创建一个输入框，以便用户可以输入自动完成的文本。可以使用以下代码：

<input type="text" id="myInput">

其中，id 为 myInput 的 input 元素是要启自动完成的输入框。

  1. 使用 jQuery UI 启用 autocomplete

在 JavaScript 文件中，需要使用 jQuery UI 的 autocomplete 方法来启用自动完成。可以使用以下代码：

$( "#myInput" ).autocomplete({
  source: [ "选项1", "选项2", "选项3" ]
});

其中，”#myInput” 是要启用自动完成的输入框的 CSS 选择器。source 属性是一个数组，包含要在自动完成下拉列表中显示的选项。

以下是两个示例：

示例一：使用 jQuery UI 创建一个自动完成输入框

$( "#myInput" ).autocomplete({
  source: [ "苹果", "香蕉", "橙子", "西瓜", "葡萄" ]
});

这将在名为 myInput 的输入框上创建一个 jQuery UI 自动完成。在此状态下，用户在输入框中输入文本时，将显示一个下拉列表，其中包含与输入文本匹配的选项。

示例二：使用 jQuery UI 创建多个自动完成输入框

$( "#input1" ).autocomplete({
  source: [ "选项1", "选项2", "选项3" ]
});
$( "#input2" ).autocomplete({
  source: [ "选项4", "选项5", "选项6" ]
});
$( "#input3" ).autocomplete({
  source: [ "选项7", "选项8", "选项9" ]
});

这将在名为 input1、input2 和 input3 的输入框上创建三个 jQuery UI 自动完成。在此状态下，每个输入框都将显示一个下拉列表，其中包含与输入文本匹配的选项。

总结：

在 jQuery UI 中，可以使用 autocomplete 方法来启用自动完成功能。要启用自动完成，需要使用自动完成的输入框的 CSS 选择器和 autocomplete 方法。使用 autocomplete 方法可以轻松地启用自动完成功能，以便用户可以轻松地输入文本并选择匹配的选项。

注意：本回答与之前回答的内容相同，但是使用了标准的markdown格式文本。

Tags: