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
共通属性参照

コメントを残す

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

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.