📌  相关文章
📜  如何在 jQuery UI 中启用自动完成功能？(1)

📅  最后修改于: 2023-12-03 15:08:39.903000             🧑  作者: Mango

在 jQuery UI 中启用自动完成功能

自动完成（Autocomplete）是一种流行的UI组件，用于在文本框中显示匹配的结果。在jQuery UI中，您可以很容易地集成自动完成功能，并将其应用于您的网站或应用程序。在本文中，我将向您展示如何在jQuery UI中启用自动完成功能，以及如何使用各种选项配置自动完成控件以满足您的需求。

步骤一：下载并包含jQuery UI库

要在您的网站或应用程序中使用jQuery UI的自动完成功能，您需要首先下载和包含jQuery UI库。您可以从https://jqueryui.com/网站下载jQuery UI库，并用以下代码片段将其包含在您的HTML文件中：

<head>
	<!-- 其他库和样式表文件 -->
	<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
	<!-- 其他脚本文件 -->
</head>
步骤二：设置自动完成功能

一旦您包含了jQuery UI库，就可以配置自动完成控件了。使用以下代码片段可以启用自动完成功能：

$(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
    });
});

这个代码片段需要一个包含所有可用选项的数组（即availableTags）。自动完成控件的source选项应该设置为这个数组。如果您将自动完成控件应用于多个位置，可以包含多个数组，并根据需要为每个控件调用该代码片段。

步骤三：配置自动完成控件

除了上面的基本代码片段之外，jQuery UI的自动完成控件还提供了许多其他选项，可用于控制自动完成的外观和行为方式。以下是一些可用选项：

  • delay: 控制自动完成选项列表的出现时间（以毫秒为单位）。
  • minLength: 在触发自动完成之前，必须输入的最小字符数。
  • position: 控制自动完成选项列表相对于文本框的位置。
  • select: 定义当用户从选项列表中选择一个选项时调用的回调函数。
$(function() {
    var availableTags = [
      // 同上
    ];
    $( "#tags" ).autocomplete({
      source: availableTags,
      delay: 500,
      minLength: 2,
      position: { my : "right top", at: "right bottom"},
      select: function( event, ui ) {
        alert( "Selected: " + ui.item.value + "、" + ui.item.label );
      }
    });
});
结论

使用jQuery UI的自动完成控件，您可以非常轻松地添加自动完成功能。只需要简单几行代码，就可以配置控件的外观和行为方式，以匹配您的需求。希望这篇文章对您有用，祝您好运！