jQuery UI autocomplete 
  

jQuery UI自动完成

自动填充机制在现代网站中经常使用,可在文本框中键入起始单词时向用户提供建议列表。它方便用户从列表中选择一个项目,该项目将显示在输入字段中。此功能可防止用户输入整个单词或一组单词。

jQueryUI提供了一个自动完成小部件,通过在文本框中提供一系列建议来方便用户。这个控件的行为很像<select>下拉菜单,但过滤选择以仅显示与用户在控件中键入的内容匹配的选项。

句法:

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

$(selector, context).autocomplete (options) Method
$(selector, context).autocomplete ("action", params) Method

第一种方法

自动完成(选项)方法指定一个HTML<input>元素必须作为输入字段进行管理,该字段将显示在建议列表上方。这里的options参数是一个对象,它指定当用户在输入字段中键入内容时建议列表的行为。

句法:

$(selector, context).autocomplete (options);

您可以使用JavaScript对象一次使用一个或多个选项。如果有多个选项,则必须使用逗号将它们分开,如下所示:

$(selector, context).autocomplete({option1: value1, option2: value2..... });

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

Option Description
appendTo This option is used append an element to the menu. By default its value is null.
autoFocus If you set this option as TRUE, the first item of the menu will automatically be focused when the menu is shown. By default its value is FALSE.
delay This option specifies the time delay in milliseconds to wait before trying to obtain the matching values (as specified by the source option). By default its value is 300.
disabled If you set this option as true, the autocomplete widget is initially disabled. By default its value is false.
minlength It specifies the number of characters that must be entered before trying to obtain the matching values (as specified by the source option). By default its value is 1.
position This option identifies the position of the suggestions menu iaccording to the input element. By default its value is { my: “left top”, at: “left bottom”, collision: “none” }.
source This option specifies the manner in which the data that matches the input data is obtained. You must have to provide a value or the autocomplete widget won?t be created. By default its value is none; must be specified.

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.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中使用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.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

在jQueryUI中使用minLength和delay的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中使用lable 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="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://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>
error: 内容受到保护 !!