JqueryUI - 自動完成

上一個
下一個

自動完成是一種在現代網站中經常使用的機制，用於向用戶提供其在文字框中鍵入的單詞開頭的建議列表。然後，使用者可以選擇列表中的一個專案，該專案將顯示在輸入欄位中。此功能可防止使用者必須輸入整個單詞或一組單詞。

JQueryUI 提供了一個自動完成小部件——一個控制元件，其功能非常類似於 <select> 下拉列表，但會過濾選擇項，僅顯示與使用者在控制元件中鍵入的內容匹配的選擇項。jQueryUI 提供了 autocomplete() 方法，用於在輸入欄位下方建立建議列表，並向相關元素新增新的 CSS 類，以賦予它們適當的樣式。

任何可以接收輸入的欄位都可以轉換為自動完成，即 <input> 元素、<textarea> 元素以及具有 contenteditable 屬性的元素。

語法

autocomplete() 方法可以用兩種形式使用 -

$ (selector, context).autocomplete (options) 方法

autocomplete (options) 方法宣告一個 HTML <input> 元素必須被管理為一個輸入欄位，該欄位將在建議列表上方顯示。options 引數是一個物件，用於指定使用者在輸入欄位中鍵入時建議列表的行為。

語法

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

您可以使用 Javascript 物件一次提供一個或多個選項。如果要提供多個選項，則使用逗號分隔它們，如下所示 -

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

下表列出了可與此方法一起使用的不同 options -

序號 選項 & 描述
1 appendTo

此選項用於將元素附加到選單。預設值為 null。

選項 - appendTo

此選項用於將元素附加到選單。預設值為 null。當值為 null 時，將檢查輸入欄位的父級是否存在 ui-front 類。如果找到具有 ui-front 類的元素，則選單將附加到該元素。

語法

$( ".selector" ).autocomplete({ appendTo: "#identifier" });
2 autoFocus

如果此選項設定為 true，則在顯示選單時將自動聚焦選單的第一個專案。預設值為 false。

選項 - autoFocus

如果此選項設定為 true，則在顯示選單時將自動聚焦選單的第一個專案。預設值為 false。

語法

$( ".selector" ).autocomplete({ autoFocus: true });
3 delay

此選項是一個整數，表示在嘗試獲取匹配值（如 source 選項指定）之前要等待的毫秒數。這可以透過給使用者時間在搜尋啟動之前輸入更多字元來幫助減少非本地資料獲取時的抖動。預設值為 300。

選項 - delay

此選項是一個整數，表示在嘗試獲取匹配值（如 source 選項指定）之前要等待的毫秒數。這可以透過給使用者時間在搜尋啟動之前輸入更多字元來幫助減少非本地資料獲取時的抖動。預設值為 300。

語法

$( ".selector" ).autocomplete({ delay: 500 });
4 disabled

如果指定此選項且為 true，則自動完成小部件最初處於停用狀態。預設值為 false。

選項 - disabled

如果指定此選項且為 true，則自動完成小部件最初處於停用狀態。預設值為 false。

語法

$( ".selector" ).autocomplete({ disabled: true });
5 minLength

在嘗試獲取匹配值（如 source 選項指定）之前必須輸入的字元數。這可以防止在少量字元不足以將集合縮小到合理級別時呈現過大的值集。預設值為 1。

選項 - minLength

在嘗試獲取匹配值（如 source 選項指定）之前必須輸入的字元數。這可以防止在少量字元不足以將集合縮小到合理級別時呈現過大的值集。預設值為 1。

語法

$( ".selector" ).autocomplete({ minLength: 0 });
6 position

此選項標識建議選單相對於關聯輸入元素的位置。of 選項預設為輸入元素，但您可以指定另一個元素來進行定位。預設值為 { my: "left top", at: "left bottom", collision: "none" }。

選項 - position

此選項標識建議選單相對於關聯輸入元素的位置。of 選項預設為輸入元素，但您可以指定另一個元素來進行定位。預設值為 { my: "left top", at: "left bottom", collision: "none" }。

語法

$( ".selector" ).autocomplete({ position: { my : "right top", at: "right bottom" } });
7 source

此選項指定獲取與輸入資料匹配的資料的方式。必須提供值，否則不會建立自動完成小部件。預設值為 none; 必須指定。

選項 - source

此選項指定獲取與輸入資料匹配的資料的方式。必須提供值，否則不會建立自動完成小部件。此值可以是

  • 字串，表示將返回匹配資料的伺服器資源的 URL，

  • 陣列，表示將從中匹配值的本地資料，或

  • 函式，用作提供匹配值的通用回撥。

語法

$( ".selector" ).autocomplete({ source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] });

下一節將向您展示一些自動完成小部件功能的工作示例。

預設功能

以下示例演示了自動完成小部件功能的簡單示例，未向 autocomplete() 方法傳遞任何引數。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://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() {
            var availableTutorials  =  [
               "ActionScript",
               "Bootstrap",
               "C",
               "C++",
            ];
            $( "#automplete-1" ).autocomplete({
               source: availableTutorials
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type "a" or "s"</p>
         <label for = "automplete-1">Tags: </label>
         <input id = "automplete-1">
      </div>
   </body>
</html>

讓我們將以上程式碼儲存在一個 HTML 檔案 autocompleteexample.htm 中，並在支援 javascript 的標準瀏覽器中開啟它，您應該會看到以下輸出。現在，您可以使用結果 -

autoFocus 的使用

以下示例演示了在 JqueryUI 的自動完成小部件中使用選項 autoFocus。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://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() {
            var availableTutorials = [
               "ActionScript",
               "Bootstrap",
               "C",
               "C++",
            ];
            $( "#automplete-2" ).autocomplete({
               source: availableTutorials,
               autoFocus:true
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type "a" or "s"</p>
         <label for = "automplete-2">Tags: </label>
         <input id = "automplete-2">
      </div>
   </body>
</html>

讓我們將以上程式碼儲存在一個 HTML 檔案 autocompleteexample.htm 中，並在支援 javascript 的標準瀏覽器中開啟它，您也應該會看到以下輸出。現在，您可以使用結果 -

minLength 和 delay 的使用

以下示例演示了在 JqueryUI 的自動完成小部件中使用兩個選項 minLength 和 delay。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://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() {
            var availableTutorials = [
               "ActionScript",
               "Bootstrap",
               "C",
               "C++",
               "Ecommerce",
               "Jquery",
               "Groovy",
               "Java",
               "JavaScript",
               "Lua",
               "Perl",
               "Ruby",
               "Scala",
               "Swing",
               "XHTML"	
            ];
            $( "#automplete-3" ).autocomplete({
               minLength:2,   
               delay:500,   
               source: availableTutorials
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type two letter for e.g:ja,sc etc</p>
         <label for = "automplete-3">Tags: </label>
         <input id = "automplete-3">
      </div>
   </body>
</html>

讓我們將以上程式碼儲存在一個 HTML 檔案 autocompleteexample.htm 中，並在支援 javascript 的標準瀏覽器中開啟它，您也應該會看到以下輸出。現在，您可以使用結果 -

標籤的使用

以下示例演示了在 JqueryUI 的自動完成小部件中使用選項 label。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://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: "Australia", value: "AUS" }
               ]
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type I OR A</p>
         <input id = "autocomplete-4">
      </div>
   </body>
</html>

讓我們將以上程式碼儲存在一個 HTML 檔案 autocompleteexample.htm 中，並在支援 javascript 的標準瀏覽器中開啟它，您也應該會看到以下輸出。現在，您可以使用結果 -

外部源的使用

以下示例演示了在 JqueryUI 的自動完成小部件中使用外部檔案作為 source 選項。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://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-5" ).autocomplete({
               source: "/jqueryui/search.php",
               minLength: 2
            });
         });
      </script> 
   </head>
   
   <body>
      <input id = "autocomplete-5">
   </body>
</html>

檔案 search.php 位於與上述檔案 (autocompleteexample.html) 相同的位置。search.php 的內容如下 -

<?
$term = $_GET[ "term" ];
$companies = array(
   array( "label" => "JAVA", "value" => "1" ),
   array( "label" => "DATA IMAGE PROCESSING", "value" => "2" ),
   array( "label" => "JAVASCRIPT", "value" => "3" ),
   array( "label" => "DATA MANAGEMENT SYSTEM", "value" => "4" ),
   array( "label" => "COMPUTER PROGRAMMING", "value" => "5" ),
   array( "label" => "SOFTWARE DEVELOPMENT LIFE CYCLE", "value" => "6" ),
   array( "label" => "LEARN COMPUTER FUNDAMENTALS", "value" => "7" ),
   array( "label" => "IMAGE PROCESSING USING JAVA", "value" => "8" ),
   array( "label" => "CLOUD COMPUTING", "value" => "9" ),
   array( "label" => "DATA MINING", "value" => "10" ),
   array( "label" => "DATA WAREHOUSE", "value" => "11" ),
   array( "label" => "E-COMMERCE", "value" => "12" ),
   array( "label" => "DBMS", "value" => "13" ),
   array( "label" => "HTTP", "value" => "14" )
	
);

$result = array();
foreach ($companies as $company) {
   $companyLabel = $company[ "label" ];
   if ( strpos( strtoupper($companyLabel), strtoupper($term) )!== false ) {
      array_push( $result, $company );
   }
}

echo json_encode( $result );
?>

讓我們將以上程式碼儲存在一個 HTML 檔案 autocompleteexample.htm 中，並在支援 javascript 的標準瀏覽器中開啟它，您也應該會看到以下輸出。現在，您可以使用結果 -

例如，鍵入兩個字母的單詞：ja、sc 等

$ (selector, context).autocomplete ("action", params) 方法

autocomplete ("action", params) 方法可以對建議列表執行操作，例如顯示或隱藏。操作在第一個引數中指定為字串（例如，"close" 用於隱藏列表）。檢視可以傳遞的操作，在下表中。

語法

$(selector, context).autocomplete ("action", params);;

下表列出了可與此方法一起使用的不同 actions -

序號 操作 & 描述
1 close

此操作隱藏自動完成選單中的建議列表。此方法不接受任何引數。

操作 - close

此操作隱藏自動完成選單中的建議列表。此方法不接受任何引數。

語法

$( ".selector" ).autocomplete("close");
2 destroy

此操作刪除自動完成功能。建議列表將被刪除。此方法不接受任何引數。

操作 - destroy

此操作刪除自動完成功能。建議列表將被刪除。此方法不接受任何引數。

語法

$( ".selector" ).autocomplete("destroy");
3 disable

此操作停用自動完成機制。建議列表將不再出現。此方法不接受任何引數。

操作 - disable

此操作停用自動完成機制。建議列表將不再出現。此方法不接受任何引數。

語法

$( ".selector" ).autocomplete("disable");
4 enable

此操作重新啟用自動完成機制。建議列表將再次顯示。此方法不接受任何引數。

操作 - enable

此操作重新啟用自動完成機制。建議列表將再次顯示。此方法不接受任何引數。

語法

$( ".selector" ).autocomplete("enable");
5 option( optionName )

此操作檢索指定引數 optionName 的值。此選項對應於與 autocomplete (options) 一起使用的選項之一。

操作 - option( optionName )

此操作檢索指定引數 optionName 的值。此選項對應於與 autocomplete (options) 一起使用的選項之一。

語法

var isDisabled = $( ".selector" ).autocomplete( "option", "disabled" );
6 option

此操作獲取一個物件，其中包含表示當前自動完成選項雜湊的鍵/值對。

操作 - option

此操作獲取一個物件，其中包含表示當前自動完成選項雜湊的鍵/值對。

語法

var options = $( ".selector" ).autocomplete( "option" );
7 option( optionName, value )

此操作設定與指定 optionName 關聯的自動完成選項的值。引數 optionName 是要設定的選項的名稱，value 是要為選項設定的值。

操作 - option( optionName, value )

此操作設定與指定 optionName 關聯的自動完成選項的值。引數 optionName 是要設定的選項的名稱，value 是要為選項設定的值。

語法

$( ".selector" ).autocomplete( "option", "disabled", true );
8 option( options )

此操作設定自動完成的一個或多個選項。引數 options 是要設定的選項-值對的對映。

操作 - option( options )

此操作設定自動完成的一個或多個選項。引數 options 是要設定的選項-值對的對映。

語法

$( ".selector" ).autocomplete( "option", { disabled: true } );
9 search( [value ] )

此操作搜尋字串值和資料來源（在 options.source 中指定）之間的對應關係。必須在 value 中達到最少字元數（在 options.minLength 中指示），否則不會執行搜尋。
10 widget

檢索與建議列表對應的 <ul> DOM 元素。這是一個 jQuery 類的物件，允許輕鬆訪問列表，而無需使用 jQuery 選擇器。

操作 - widget

檢索與建議列表對應的 <ul> DOM 元素。這是一個 jQuery 類的物件，允許輕鬆訪問列表，而無需使用 jQuery 選擇器。

語法

$( ".selector" ).autocomplete("widget");

示例

現在讓我們看看使用上表中操作的示例。以下示例演示了 option( optionName, value ) 方法的使用。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://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() {
            var availableTutorials = [
               "ActionScript",
               "Bootstrap",
               "C",
               "C++",
               "Ecommerce",
               "Jquery",
               "Groovy",
               "Java",
               "JavaScript",
               "Lua",
               "Perl",
               "Ruby",
               "Scala",
               "Swing",
               "XHTML"	
            ];
            $( "#automplete-6" ).autocomplete({
               source: availableTutorials
            });
            $( "#automplete-6" ).autocomplete("option", "position",
               { my : "right-10 top+10", at: "right top" }) 
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div class = "ui-widget">
         <p>Type "a" or "s"</p>
         <label for = "automplete-6">Tags: </label>
         <input id = "automplete-6">
      </div>
   </body>
</html>

讓我們將以上程式碼儲存在一個 HTML 檔案 autocompleteexample.htm 中，並在支援 javascript 的標準瀏覽器中開啟它，您也應該會看到以下輸出 -

擴充套件點

自動完成小部件可以使用小部件工廠進行擴充套件。擴充套件小部件時，您可以覆蓋或新增到現有方法的行為。下表列出了充當擴充套件點的幾種方法，它們具有與上面 列出 的外掛方法相同的 API 穩定性。

序號 方法 & 描述
1 _renderItem( ul, item )

此方法控制小部件選單中每個選項的建立。此方法建立一個新的 <li> 元素，將其附加到選單並返回它。

_renderItem( ul, item )

此方法控制小部件選單中每個選項的建立。此方法建立一個新的 <li> 元素，將其附加到選單並返回它。其中 -

  • <ul> 是必須附加到新建立的 <li> 元素的元素。

  • item

    可以是 label(String)，即要顯示的專案的字串，或者 value(String)，即選擇專案時要插入輸入的值。
2 _renderMenu( ul, items )

此方法控制構建小部件的選單。

_renderMenu( ul, items )

此方法控制構建小部件的選單。其中 -

  • <ul> 是與使用者鍵入的術語匹配的專案的陣列。每個專案都是一個物件，具有 label 和 value 屬性。
3 _resizeMenu()

此方法控制在顯示選單之前調整選單大小。選單元素位於 this.menu.element 中。此方法不接受任何引數。

_resizeMenu()

此方法控制在顯示選單之前調整選單大小。選單元素位於 this.menu.element 中。此方法不接受任何引數。

自動完成元素上的事件管理

除了我們在上一節中看到的 autocomplete (options) 方法之外，JqueryUI 還提供了事件方法，這些方法會在特定事件觸發時觸發。這些事件方法列在下面 -

序號 事件方法 & 描述
1 change(event, ui)

當<input>元素的值基於選擇發生更改時，將觸發此事件。觸發時，此事件將始終在close事件觸發後出現。

事件 - change(event, ui)

當<input>元素的值基於選擇發生更改時，將觸發此事件。觸發時，此事件將始終在close事件觸發後出現。其中event的型別為Event，ui的型別為Object。ui的可能值如下：

  • item - 從選單中選擇的專案（如果有）。否則，此屬性為null。

語法

$( ".selector" ).autocomplete({
   change: function( event, ui ) {}
});
2 close(event, ui)

每當自動完成選單關閉時，都會觸發此事件。

事件 - close(event, ui)

每當自動完成選單關閉時，都會觸發此事件。其中event的型別為Event，ui的型別為Object。

語法

$( ".selector" ).autocomplete({
   close: function( event, ui ) {}
});
3 create(event, ui)

建立自動完成時，將觸發此事件。

事件 - create(event, ui)

建立自動完成時，將觸發此事件。其中event的型別為Event，ui的型別為Object。ui的可能值如下：

  • item - 從選單中選擇的專案（如果有）。否則，此屬性為null。

語法

$( ".selector" ).autocomplete({
   create: function( event, ui ) {}
});
4 focus(event, ui)

每當選單中的某個選項獲得焦點時，就會觸發此事件。除非取消（例如，透過返回false），否則焦點值將設定到<input>元素中。

事件 - focus(event, ui)

每當選單中的某個選項獲得焦點時，就會觸發此事件。除非取消（例如，透過返回false），否則焦點值將設定到<input>元素中。其中event的型別為Event，ui的型別為Object。ui的可能值如下：

  • item - 獲得焦點的專案。

語法

$( ".selector" ).autocomplete({
   focus: function( event, ui ) {}
});
5 open(event, ui)

資料準備就緒且選單即將開啟後，將觸發此事件。

事件 - open(event, ui)

資料準備就緒且選單即將開啟後，將觸發此事件。其中event的型別為Event，ui的型別為Object。

語法

$( ".selector" ).autocomplete({
   open: function( event, ui ) {}
});
6 response(event, ui)

搜尋完成後，在顯示選單之前，將觸發此事件。即使由於沒有結果或自動完成功能被停用而不會顯示選單，只要搜尋完成，就會始終觸發此事件。

事件 - response(event, ui)

搜尋完成後，在顯示選單之前，將觸發此事件。即使由於沒有結果或自動完成功能被停用而不會顯示選單，只要搜尋完成，就會始終觸發此事件。其中event的型別為Event，ui的型別為Object。ui的可能值如下：

  • content - 包含響應資料，可以修改它以更改將顯示的結果。

語法

$( ".selector" ).autocomplete({
   response: function( event, ui ) {}
});
7 search(event, ui)

滿足任何delay和minLength條件後，在由source指定的機制啟用之前，將觸發此事件。如果取消，則搜尋操作將中止。
8 select(event, ui)

從自動完成選單中選擇值時，將觸發此事件。取消此事件將阻止將值設定到<input>元素中（但不會阻止選單關閉）。

事件 - select(event, ui)

從自動完成選單中選擇值時，將觸發此事件。取消此事件將阻止將值設定到<input>元素中（但不會阻止選單關閉）。其中event的型別為Event，ui的型別為Object。ui的可能值如下：

  • item - 包含所選選項的label和value屬性的物件。

語法

$( ".selector" ).autocomplete({
   select: function( event, ui ) {}
});

示例

以下示例演示了自動完成小部件中的事件方法用法。此示例演示了focus和select事件的使用。

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href = "https://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>
      
      <style>
         #project-label {
            display: block;
            font-weight: bold;
            margin-bottom: 1em;
         }
         #project-icon {
            float: left;
            height: 32px;
            width: 32px;
         }
         #project-description {
            margin: 0;
            padding: 0;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            var projects = [
               {
                  value: "java",
                  label: "Java",
                  desc: "write once run anywhere",
               },
               {
                  value: "jquery-ui",
                  label: "jQuery UI",
                  desc: "the official user interface library for jQuery",
               },
               {
                  value: "Bootstrap",
                  label: "Twitter Bootstrap",
                  desc: "popular front end frameworks ",
               }
            ];
            $( "#project" ).autocomplete({
               minLength: 0,
               source: projects,
               focus: function( event, ui ) {
                  $( "#project" ).val( ui.item.label );
                     return false;
               },
               select: function( event, ui ) {
                  $( "#project" ).val( ui.item.label );
                  $( "#project-id" ).val( ui.item.value );
                  $( "#project-description" ).html( ui.item.desc );
                  return false;
               }
            })
				
            .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
               return $( "<li>" )
               .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
               .appendTo( ul );
            };
         });
      </script>
   </head>
   
   <body>
      <div id = "project-label">Select a project (type "a" for a start):</div>
      <input id = "project">
      <input type = "hidden" id = "project-id">
      <p id = "project-description"></p>
   </body>
</html>

讓我們將以上程式碼儲存在一個名為autocompleteexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它。您還應該看到以下輸出：

列印頁面
上一頁
下一頁
廣告

© . All rights reserved.