script.aculo.us - 自動完成

開箱即用，script.aculo.us 支援兩種自動完成資料來源：

遠端資料來源（透過 Ajax 獲取），
本地資料來源（網頁尾本中的字串陣列）。

根據您計劃使用的來源，您將分別例項化Ajax.Autocompleter 或Autocompleter.Local。儘管配備了特定選項，但這兩種物件共享大量功能集並提供統一的使用者體驗。

構建這些物件時，您始終需要傳入四項內容：

您想要啟用自動完成的文字欄位。通常，您可以傳遞欄位本身或其id屬性的值。
自動完成選項的容器，最終將包含一個<ul></li>選項列表供選擇。同樣，直接傳遞元素或其id=。此元素通常是一個簡單的<div>。</p></li>
資料來源，根據資料來源型別，將表示為 JavaScript 字串陣列或遠端資料來源的 URL。
最後是選項。與往常一樣，它們以某種雜湊的形式提供，並且兩個自動完成物件都可以使用無自定義選項；所有內容都有合適的預設值。

要使用 script.aculo.us 的自動完成功能，您需要載入controls.js和effects.js模組以及prototype.js模組。因此，您script.aculo.us的最小載入將如下所示：

<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,controls"></script>

建立 Ajax 自動完成器

構造語法如下：

new Ajax.Autocompleter(element, container, url [ , options ] )

Ajax.Autocompleter 的建構函式接受四個引數：

要使用資料選項填充的文字欄位的元素名稱或引用。
用作控制元件選項選單的<div>元素的元素名稱或引用。
將提供選項的伺服器端資源的 URL。
通常的選項雜湊。

選項

建立 Ajax.Autocompleter 物件時，您可以使用以下一個或多個選項。

序號	選項及說明
1	paramName 包含釋出到伺服器端資源的文字欄位內容的查詢引數的名稱。預設為文字欄位的名稱。
2	minChars 必須輸入的字元數，之後才能發出對選項的伺服器端請求。預設為 1。
3	Frequency（頻率）內部檢查是否應將請求釋出到伺服器端資源的間隔（秒）。預設為 0.4。
4	Indicator（指示器）正在進行伺服器端選項請求時要顯示的元素的 ID 或引用。如果省略，則不顯示任何元素。
5	Parameters（引數）包含要傳遞到伺服器端資源的額外查詢引數的文字字串。
6	updateElement 當用戶選擇從伺服器返回的選項之一時觸發的回撥函式，該函式替換更新文字欄位和所選值的內部函式。
7	afterUpdateElement 在執行 updateElement 函式後觸發的回撥函式。
8	Tokens（標記）單個文字字串或文字字串陣列，指示用作分隔符的標記，以允許將多個元素輸入文字欄位，每個元素都可以單獨自動完成。

示例

線上演示

<html>
   <head>
      <title>Simple Ajax Auto-completer Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,controls"></script>
      
      <script type = "text/javascript">
         window.onload = function() {
            new Ajax.Autocompleter(
               'autoCompleteTextField',
               'autoCompleteMenu',
               '/script.aculo.us/serverSideScript.php', {}
            );
         }
      </script>
   </head>
   
   <body>
      <p>Type something in this box and then select suggested option from the list </p>

      <div>
         <label>Text field:</label>
         <input type = "text" id = "autoCompleteTextField"/>
         <div id = "autoCompleteMenu"></div>
      </div>
   </body>
</html>

現在，我們需要一個伺服器端來訪問此頁面並提供資料來源 URL (serverSideScript.php)。您需要完整的邏輯來在此指令碼中顯示建議。

例如，我們在serverSideScript.php中保留一個簡單的 HTML 文字。您可以使用 CGI、PHP、Ruby 或任何其他伺服器端指令碼編寫指令碼，以選擇合適的建議並將其格式化為<ul><li>...</li></ul>的形式，然後將其傳遞迴呼叫程式。

<ul>
   <li>One</li>
   <li>Two</li>
   <li>Three</li>
   <li>Four</li>
   <li>Five</li>
   <li>Six</li>
</ul>

這將產生以下結果：

使用上表中討論的不同選項。

建立本地自動完成器

建立本地自動完成器與我們在上一節中討論的建立 Ajax 自動完成器幾乎相同。

主要區別在於如何確定要用於自動完成的支援資料集。

使用 Ajax 自動完成器，我們提供了伺服器端資源的 URL，該資源將根據使用者輸入執行必要的過濾，並僅返回匹配的資料元素。使用本地自動完成器，我們改為提供完整的資料元素列表，作為 JavaScript 字串陣列，控制元件本身在其客戶端程式碼中執行過濾操作。

整個構造語法實際上如下：

new Autocompleter.Local(field, container, dataSource [ , options ] );

Autocompleter.Local 的建構函式接受四個引數：

要使用資料選項填充的文字欄位的元素名稱或引用。
用作控制元件選項選單的<div>元素的元素名稱或引用
對於第三個引數，我們不使用伺服器輔助自動完成器中的 URL，而是提供一個小的字串陣列，其中包含所有可能的值。
通常的選項雜湊。

選項

建立 Autocompleter.Local 物件時，您可以使用以下一個或多個選項。

序號	選項及說明
1	Choices（選項）要顯示的選項數。預設為 10。
2	partialSearch（部分搜尋）啟用在完成字串中嵌入的單詞開頭進行匹配。預設為 true。
3	fullSearch（全文搜尋）啟用在完成字串中的任何位置進行匹配。預設為 false。
4	partialChars（部分字元）定義在嘗試任何部分匹配之前必須鍵入的字元數。預設為 2。
5	ignoreCase（忽略大小寫）匹配時忽略大小寫。預設為 true。

示例

線上演示

<html>
   <head>
      <title>Simple Ajax Auto-completer Example</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,controls"></script>
      
      <script type = "text/javascript">
         window.onload = function() {
            new Autocompleter.Local(
               'autoCompleteTextField',
               'autoCompleteMenu',
               ['abcdef','abcdeg','xyzabcefg', 'tybabdefg','acdefg'],
               {ignoreCase:false}
            );
         }
      </script>
   </head>

   <body>
      <p>Type something in this box and then select suggested option from the list </p>
		
      <div>
         <label>Text field:</label>
         <input type = "text" id = "autoCompleteTextField"/>
         <div id = "autoCompleteMenu"></div>
      </div>		
   </body>
</html>

顯示後，在文字框中輸入字元“a”後，它將顯示所有匹配的選項。

使用我們的線上編譯器更好地理解使用上表中討論的不同選項的程式碼。

這將產生以下結果：

列印頁面