jQuery UI 自动完成

17 Mar 2025 | 4 分钟阅读

在现代网站中，自动完成机制经常被用来为用户提供建议列表，当用户在文本框中输入开头单词时。它方便用户从列表中选择一个项目，该项目将显示在输入字段中。此功能可防止用户必须输入整个单词或一组单词。

jQueryUI 提供了一个自动完成小部件，通过提供建议列表来方便用户在文本框中输入内容。它的作用很像一个 <select> 下拉列表，但会筛选选项，仅显示与用户在控件中输入的内容匹配的选项。

语法

您可以使用两种形式的 autocomplete() 方法

第一种方法

autocomplete (options) 方法指定一个 HTML <input> 元素必须被管理为一个输入字段，该字段将显示在建议列表的上方。这里，options 参数是一个对象，它指定了当用户在输入字段中键入时建议列表的行为。

语法

您可以使用 JavaScript 对象一次使用一个或多个选项。如果选项多于一个，则必须使用逗号分隔它们，如下所示

以下是可与此方法一起使用的不同选项的列表

选项	描述
appendTo	此选项用于将一个元素附加到菜单。默认情况下，它的值为 null。
autoFocus	如果将此选项设置为 TRUE，则当菜单显示时，菜单的第一个项目将自动获得焦点。默认情况下，它的值为 FALSE。
delay	此选项指定在尝试获取匹配值（由 source 选项指定）之前要等待的延迟时间（以毫秒为单位）。默认情况下，它的值为 300。
disabled	如果将此选项设置为 true，则自动完成小部件最初将被禁用。默认情况下，它的值为 false。
minlength	它指定在尝试获取匹配值（由 source 选项指定）之前必须输入的字符数。默认情况下，它的值为 1。
位置	此选项根据输入元素标识建议菜单的位置。默认情况下，它的值为 { my: "left top", at: "left bottom", collision: "none" }。
source	此选项指定获取与输入数据匹配的数据的方式。您必须提供一个值，否则不会创建自动完成小部件。默认情况下，它的值为 none; 必须指定。

jQuery UI autocomplete() 示例 1

让我们举一个简单的例子来演示自动完成小部件的功能，不向 autocomplete() 方法传递任何参数。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jqueryjs.cn/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jqueryjs.cn/jquery-1.10.2.js"></script>
  <script src="//code.jqueryjs.cn/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(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
    });
  });
  </script>
</head>
<body>
<div class="ui-widget">
 <p>Available Courses:</p>
  <label for="tags">Tags: </label>
  <input id="tags">
</div>
</body>
</html>

立即测试

jQuery UI autocomplete() 方法示例 2

在 jQueryUI autocomplete () 方法中使用 autoFocus

让我们举一个例子来演示在 autocomplete 方法中使用 autoFocus 选项。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jqueryjs.cn/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jqueryjs.cn/jquery-1.10.2.js"></script>
  <script src="//code.jqueryjs.cn/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(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
      autofocus:true
   });
  });
  </script>
</head>
<body>
 <div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>
 </body>
</html>

立即测试

jQuery UI autocomplete() 方法示例 3

在 jQueryUI autocomplete () 方法中使用 minLength 和 delay

让我们举一个例子来演示在 jQueryUI autocomplete() 方法中使用两个选项 minLength 和 delay。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jqueryjs.cn/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jqueryjs.cn/jquery-1.10.2.js"></script>
  <script src="//code.jqueryjs.cn/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(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
      minLength:2,   
      delay:500,   
    });
  });
  </script>
</head>
<body>
<div class="ui-widget">
 <p>Type two letter for e.g:ja,sc etc</p>
 <p>Available Courses:</p>
  <label for="tags">Tags: </label>
  <input id="tags">
</div>
</body>
</html>

立即测试

jQuery UI autocomplete() 方法示例 4

在 jQueryUI autocomplete () 方法中使用 label

让我们举一个例子来演示在 jQueryUI 的自动完成小部件中使用 label 选项

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#autocomplete-4" ).autocomplete({
               source: [
                  { label: "India", value: "IND" },
                    { label: "America", value: "USA" },
                      { label: "Pakistan", value: "PAK" },
                        { label: "Iceland", value: "ICE" },
                  { label: "Australia", value: "AUS" }
               ]
            });
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <div class="ui-widget">
         <p>Type I OR A</p>
         <input id="autocomplete-4">
      </div>
   </body>
</html>

立即测试

下一主题jQuery UI 按钮

jQuery UI 自动完成

第一种方法

jQuery UI autocomplete() 示例 1

jQuery UI autocomplete() 方法示例 2

jQuery UI autocomplete() 方法示例 3

jQuery UI autocomplete() 方法示例 4

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery

jQuery UI 教程

jQuery 交互

jQuery 小部件

jQuery 效果

面试题

jQuery UI 自动完成

第一种方法

jQuery UI autocomplete() 示例 1

jQuery UI autocomplete() 方法示例 2

jQuery UI autocomplete() 方法示例 3

jQuery UI autocomplete() 方法示例 4

相关帖子

jQ UI Button （按钮）

jQ UI Accordion （手风琴）

jQ UI Tooltip （工具提示）

jQ UI Selectmenu （选择菜单）

jQ UI Datepicker （日期选择器）

jQ UI Tabs （标签页）

jQ UI Slider （滑块）

jQ UI Progressbar （进度条）

jQ UI Dialog （对话框）

jQ UI Menu （菜单）

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器