ajax:autocomplete

補完候補を取得して、ドロップダウン形式で選択させることができます。
autocomplete1.png
選択すると、
autocomplete2.png

説明

autocompleteは、入力途中の文字列を補完するドロップダウンを表示します。
入力を進めると候補を絞り込むことができ、選択すると完全な文字列に置換してくれます。
このときに、選択した文字列と対になる値を同時にセットすることができます。上の図の例でいうと部署名が対になる値です。
一般的な使い方としては、コードを入力させて対応する名称を表示させたりするケースでしょう。
単なるドロップダウンと比べて、キーボードでの入力を簡単にするための機能になります。

属性

baseURL(必須)
共通属性参照
source(必須)
検索文字を入力するテキストフィールドのID(nameではない)を指定する。
検索結果の候補が表示され、選択されるとこのフィールドに補完される。
target(必須)
検索文字を補完した時に、対応するValue値をセットするフィールドのID(nameではない)を指定する。。
例えばコードを保管して名称をセットするラベル的フィールドを指定する。
使い道は良く分からないが、ここに”source”と同じフィールドを指定することもできる。
parameters (必須)
共通属性参照。一般的にはsourceフィールドのvalue値を送信する。
className (必須)
補完用ドロップダウンのスタイルシートクラス名。
progressStyle
Ajax通信中に使用される入力フィールドのスタイルシートクラス名。
検索中のアイコンを表示したりする。
forceSelection
true/falseで指定する。(デフォルトは、false)
trueのときはsourceフィールドに選択肢に合う入力しか許可されない。
例えば選択肢に、{“111”, “122”, “133”}が返されるとき、1文字目に2を入力すると、
Ajax通信後に削除される。選択できる値が、上記の場合、1文字目に2を使う選択肢が存在しないため。
“12”と入力することはできるが、”14″と入力すると、2文字目の4を入力すると削除される。
falseの場合は、どんな値でも入力することができる。
minimumCharacters
Ajax通信を行い補完ドロップダウンを表示させるための最小文字数。(デフォルトは0)
ここで指定した文字数に達するまでは、通信および補完ドロップダウンの表示は行われない。
appendValue
デフォルトはfalse
補完ドロップダウンで選択した結果をtargetフィールドに追加する形で入力する。
falseの場合は、選択した値で置き換えられる。
trueの場合は、後述のappendSeparaterで指定した文字列で区切って追加される。
appendSeparator
デフォルトはスペース1文字。
appendValueをtrueにした場合にのみ意味を持つ。
文字列を追加するさいの区切り文字を指定する。
postFunction
共通属性参照
emptyFunction
共通属性参照
errorFunction
共通属性参照

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)