入力コントロールへの先行入力サポートの指定
JSF テキスト入力コントロールは、JSF 先行入力フィーチャーを使用して、ユーザーが入力コントロールに入力する可能性があるものを予測することができます。 先行入力を使用した入力コントロールでは、ユーザーがそのコントロールに入力した最初の数文字を基にした選択肢のリストが表示されます。 続いて、ユーザーは、これらのオプションから 1 つを選択するか、別のテキストの入力を続行することができます。

ユーザーが入力を続行している間、先行入力フィーチャーは、ユーザーがフィールドに入力した新規の値に一致するように、オプションをフィルタリングします。

EGL は、以下の 3 つの方法のうちの 1 つにより、先行入力フィールドのオプションを取得できます。
- EGL は、ユーザーが入力した値を、そのコントロールにバインドされている変数 の validValues プロパティーの値と比較できます。 この場合、先行入力フィーチャーは、ユーザーが入力した文字と同じ文字で始まる 有効値のリストにあるすべての値を提示します。
- EGL は、ユーザーが入力した値を、変数 の validatorDataTable プロパティーで指定 された DataTable パーツの値と比較できます。 この方法は、validValues の方法とほぼ同様に機能します。
- ユーザーに提示するオプションの配列を作成する、カスタム関数を定義できます。 通常、先行入力は、ユーザーが既に入力した文字と同じ文字で始まるオプションを提示しますが、この場合、関数は、オプションの任意の配列を戻すことができます。
先行入力の使用に関するステップは、オプションのリストを取得するためにどの方法を使用するかによって異なります。
データ・テーブルまたは有効値のオプションを使用する
先行入力関数のオプションを指定するための簡単な方法は、データ・テーブルまたは有効値のリストのいずれかで、フィールドにバインドされた変数をオプションのリストに関連付けることです。
- JSF ハンドラー・パーツで、ページの入力フィールドに入力された値を表す、文字変数または数値変数を作成します。
state STRING; - この変数で、typeahead プロパティーを YES に設定します。
state STRING {typeahead = YES}; - validValues プロパティーまた
は validatorDataTable プロパティーのいずれかを使用して、
この変数をオプションのリストに関連付けます。
- validValues を使用する場合、オプションをプロパティーの値として指定します。
この例では、有効な値は、文字「A」および「N」で始まるアメリカの州名の省略形です。 ユーザーが文字「A」を入力コントロールに入力すると、先行入力は、「A」で始まる省略形を提示し、文字「N」の場合も同様に「N」で始まる省略形を提示します。state STRING {typeahead = YES, validValues = ["AK","AL","AR","AZ", "NC","NY","NH","NJ", "NM","NE","NV","ND"]};有効な値のリストによる先行入力を使用するときに、有効な値に範囲を含めることはできません。
- データ・テーブルを使用する場合は
、変数の validatorDataTable プロパティーに、
データ・テーブルの名前を設定します。
DataTable パーツを、import ステートメントによって
スコープに取り込むこともできます。
一致するデータ・テーブルは、以下の例のように表示されます。上記の validValues のサンプルの場合と同様の情報を示します。state string {typeahead = YES, ValidatorDataTable = data.stateAbbrevs};
先行入力で使用するデータ・テーブルは、MatchValidTable 型である必要があります。package data; dataTable stateAbbrevs type MatchValidTable {shared = no, resident = no} 3 abbrev char(2); {contents = [ ["AK"],["AL"],["AR"],["AZ"], ["NC"],["NY"],["NH"],["NJ"], ["NM"],["NE"],["NV"],["ND"] ]} end
- validValues を使用する場合、オプションをプロパティーの値として指定します。
- Web ページ上で、「ページ・データ」ビューから Web ページに変数をドラッグします。 「レコードの挿入」ウィンドウが開きます。
- 「レコードの挿入」ウィンドウで 、「既存レコードの更新」をクリックします。
- 変数の「コントロール・タイプ」が「入力フィールド」に設定されていることを確認します。先行入力は、入力コントロールでのみ使用することができます。
- 「終了」をクリックします。JSF ハンドラーの変数にバインドされ、 先行入力を使用するように構成された入力コントロールが、ページ上に作成されます。
カスタム関数のオプションを使用する
先行入力で 提示されるオプションをより細かく制御するために、実行時にオプションを動的に決定する関数を作成できます。
- JSF ハンドラーまたはライブラリー・パーツで、先行入力オプションを決定する関数を作成します。
この関数は、ユーザーが入力コントロールに入力したテキストを表す、STRING と
いう 1 つのパラメーターを正確に受け入れなければなりません。
また、この関数は、入力コントロールで提示される先行入力オプションを表す、STRING の配列を戻す必要があります。
この関数は、ユーザーが入力フィールドに入力したテキスト (変数 key によって表される) と、データ・テーブルの値を比較します。 コード if ( strlib.indexOf( value, key_upper) == 1 ) は、 データ・テーブルの値が、ユーザーが入力した文字で始まるかどうかを判別し、該当する場合、code results.appendElement( states.fullname[i] ); は、データ・テーブルの値を、先行入力のオプションの配列に追加します。// 以下の任意の州名を戻す //キーは完全な州名のサブストリング。 function getStateChoices( key string in ) returns( string[] ) results string[0]; key_upper string = strlib.upperCase( key ); value string; // 同じ文字で始まる値を検索する。 for ( i int from 1 to syslib.size( states ) ) // データ・テーブルの各値とキーとを比較する。 value = strlib.upperCase( states.fullname[i] ); if ( strlib.indexOf( value, key_upper ) == 1 ) // この値は、キーと同じ文字で始まる。 // それをオプションのリストに追加する。 results.appendElement( states.fullname[i] ); end end return( results ); endこの関数は、以下の例にあるようにデータ・テーブルの情報を使用しますが、関数は、データベースやレコード変数など、任意のソースからデータを検索することができます。
package data; dataTable states type MatchValidTable {shared = no, resident = no} 3 fullname char(20); {contents = [ ["ALASKA"], ["ALABAMA"], ["ARKANSAS"], ["ARIZONA"], ["NORTH CAROLINA"], ["NORTH DAKOTA"], ["NEBRASKA"], ["NEW HAMPSHIRE"], ["NEW JERSEY"], ["NEW MEXICO"], ["NEVADA"], ["NEW YORK"] ]} end - JSF ハンドラー・パーツで、ページの入力フィールドに入力された値を表す、文字変数または数値変数を作成します。
state STRING; - この変数で、typeaheadFunction プロパティーに、関数の名前を設定します。
state STRING {typeaheadFunction = getStateChoices}; - Web ページ上で、「ページ・データ」ビューから Web ページに変数をドラッグします。 「レコードの挿入」ウィンドウが開きます。
- 「レコードの挿入」ウィンドウで 、「既存レコードの更新」をクリックします。
- 変数の「コントロール・タイプ」が「入力フィールド」に設定されていることを確認します。先行入力は、入力コントロールでのみ使用することができます。
- 「終了」をクリックします。JSF ハンドラーの変数にバインドされ、 先行入力を使用するように構成された入力コントロールが、ページ上に作成されます。
先行入力のオプションを設定する
ページでの先行入力機能の外観と動作をカスタマイズできます。 これらのオプションを設定するには、次のステップを実行します。
- Web ページで、先行入力アイコンをクリックして選択する。先行入力アイコンは、 先行入力が使用可能となっている入力コントロールのすぐ右側にあります。
- 先行入力アイコンを選択した状態で、「プロパティー」ビューを開く
。

- 「プロパティー」ビューで、先行入力フィーチャーのオプションを設定する。先行 入力フィールドのサイズ、オプションが提示されるまでにコントロールが待機すべき時間、EGL がオプションを戻すのを待機する間の入力コントロールの動作について設定できます。 先行入力に関連付けられたオプションについて詳しくは、『先行入力完了コンポーネント』を参照してください。