Script.aculo.us-scriptaculous-autocompletion

提供：Dev Guides
移動先:案内、検索

script.aculo.us-自動補完

箱から出して、script.aculo.usはオートコンプリートの2つのソースをサポートしています-

  • リモートソース（Ajaxから取得）、
  • ローカルソース（Webページのスクリプト内の文字列配列）。

使用する予定のソースに応じて、_Ajax.Autocompleter_または_Autocompleter.Local_をそれぞれインスタンス化します。 特定のオプションを備えていますが、これらの2つのオブジェクトは大きな機能セットを共有し、統一されたユーザーエクスペリエンスを提供します。

これらのオブジェクトを構築する際に、常にこれらのオブジェクトに渡す4つのものがあります-

  • 自動補完するテキストフィールド。 通常どおり、フィールド自体またはそのid =属性の値を渡すことができます。
  • オートコンプリートの選択肢のコンテナ。選択するオプションの<ul> </li>リストを保持します。 繰り返しますが、要素を直接渡すか、その id = を渡します。 ほとんどの場合、この要素は単純な<​​div>です。</p> </li>
  • ソースタイプに応じて、文字列のJavaScript配列またはリモートソースへのURLとして表現されるデータソース。
  • 最後に、オプション。 いつものように、それらは一種のハッシュとして提供されており、両方のオートコンプリートオブジェクトはカスタムオプションなしで対応できます。すべてに適切なデフォルトがあります。

script.aculo.usのオートコンプリート機能を使用するには、prototypes.jsモジュールと共にcontrols.jsおよびeffects.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 Auto-Completerの作成

構文は次のとおりです- 

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

_Ajax.Autocompleter_のコンストラクタは4つのパラメータを受け入れます-

  • データの選択肢を入力する要素名またはテキストフィールドへの参照。
  • コントロールが選択肢のメニューとして使用する<div>要素への要素名または参照。
  • 選択肢を提供するサーバー側リソースのURL。 *通常のオプションのハッシュ。

オプション

Ajax.Autocompleterオブジェクトの作成中に、次のオプションの1つ以上を使用できます。

Sr.No Option & Description
1
  • paramName*

サーバー側リソースに送信されるテキストフィールドのコンテンツを含むクエリパラメーターの名前。 デフォルトはテキストフィールドの名前です。

2

minChars

サーバー側の選択要求を実行する前に入力する必要がある文字数。 デフォルトは1です。

3

Frequency

サーバー側リソースへのリクエストをポストする必要があるかどうかを確認するための内部チェックの間隔（秒単位）。 デフォルトは0.4です。

4

Indicator

サーバー側の選択要求が進行中に表示される要素へのidまたは参照。 省略した場合、要素は表示されません。

5

Parameters

サーバー側リソースに渡される追加のクエリパラメータを含むテキスト文字列。

6

updateElement

ユーザーがサーバーから返された選択肢の1つを選択したときにトリガーされるコールバック関数。テキストフィールドを選択した値で更新する内部関数を置き換えます。

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 Auto-completerを使用して、ユーザー入力が与えられると必要なフィルタリングを実行し、一致したデータ要素のみを返すサーバー側リソースのURLを提供しました。 Local Autocompleterでは、代わりにJavaScript String配列としてデータ要素の完全なリストを提供し、コントロール自体が独自のクライアントコード内でフィルタリング操作を実行します。

全体の構文は実際には次のとおりです- 

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

Autocompleter.Localのコンストラクタは、4つのパラメータを受け入れます-

  • データの選択肢を入力する要素名またはテキストフィールドへの参照。
  • コントロールが選択肢のメニューとして使用する<div>要素への要素名または参照
  • 3番目のパラメーターには、サーバー支援オートコンプリーターのURLの代わりに、可能なすべての値を含む小さな文字列配列を提供します。 *通常のオプションのハッシュ。

オプション

Autocompleter.Localオブジェクトの作成中に、次のオプションの1つ以上を使用できます。

Sr.No Option & Description
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」がテキストボックスに入力された後、一致するすべてのオプションが表示されます。

上記の表で説明したさまざまなオプションを使用してコードをよりよく理解するには、オンラインコンパイラを使用してください。

これにより、次の結果が生成されます–

「https://www.finddevguides.com/index.php?title=Script.aculo.us-scriptaculous-autocompletion&oldid=33411」から取得
Powered by MediaWiki