jQuery UI autocomplete

jQuery UI autocomplete

现代网站中经常使用自动完成机制,以在文本框中键入起始单词的同时向用户提供建议列表。它方便用户从列表中选择一个项目,该项目将显示在输入字段中。此功能可防止用户输入整个单词或一组单词。
jQueryUI提供了一个自动完成小部件,可通过在文本框中提供一系列建议来方便用户。这是一个控件,其行为与<select>下拉列表非常相似,但是会过滤选择以仅显示与用户在控件中键入的内容匹配的选项。
语法:
您可以以两种形式使用autocomplete()方法:
 $(selector, context).autocomplete (options)
 $(selector, context).autocomplete ("action", params)

第一种方法

$(selector, context).autocomplete(options)方法指定必须将HTML <input>元素作为输入字段进行管理,该元素将显示在建议列表上方。这里的options参数是一个对象,用于指定用户在输入字段中键入内容时建议列表的行为。
语法:
 $(selector, context).autocomplete (options);
您可以使用JavaScript对象同时使用一个或多个选项。如果有多个选项,则必须使用逗号将它们分开,如下所示:
 $(selector, context).autocomplete({option1: value1, option2: value2..... });
以下是可与该方法一起使用的不同选项的列表:
选项 说明
appendTo 此选项用于将元素添加到菜单。默认情况下,其值为null。
autoFocus 如果将此选项设置为TRUE,则显示菜单时,菜单的第一项将自动聚焦。默认情况下,其值为FALSE。
delay 此选项指定尝试获取匹配值之前等待的时间(以毫秒为单位)(由source选项指定)。默认情况下,其值为300。
disabled 如果将此选项设置为true,则最初将禁用自动完成小部件。默认情况下,其值为false。
minlength 它指定尝试获取匹配值之前必须输入的字符数(由source选项指定)。默认情况下,其值为1。
position 此选项根据输入元素标识建议菜单的位置。默认情况下,其值为{my: " left top",at: " left bottom",碰撞: " none"}。
source 此选项指定获取与输入数据匹配的数据的方式。您必须提供一个值,否则将不会创建自动完成小部件。默认情况下,其值为none;必须指定。

jQuery UI autocomplete()示例1

让我们举一个简单的示例来演示autocomplete小部件功能,不向autocomplete()方法传递任何参数。
 <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/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:
让我们演示在自动完成方法中使用选项autoFocus的示例。
 <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/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

minLength的使用和jQueryUI autocomplete()方法中的延迟:
让我们以一个示例来演示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.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/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()方法中使用标签:
一个示例来演示jQueryUI的自动完成小部件中选项标签的用法:
 <!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/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>