4.1.1 AutoCompleter

Ajaxフレームワーク UI部品リファレンス

目次索引

第4章機能付加部品

> 4.1 入力支援機能

4.1.1 AutoCompleter

AutoCompleterは、選択可能な文字列リストを表示し、テキストフィールドの入力を支援する機能です。
AutoCompleterは、TextInputとSelectListをつなぐ機能付加部品です。

機能付加対象は、TextInputです。

[図: 表示例]

[図: 動作イメージ]

候補リストが表示されている状態では、↓カーソルキーにより選択できます。選択候補リストの一番上が確定候補(マウスオーバーと同じ)になります。
確定候補は、↑↓カーソルキーまたはマウスオーバーで変更できます。
候補リストが表示されている状態でも、選択候補がある状態でも、カーソルはTextInputの中にあり、←→カーソル移動やキー入力を受け付けます。
確定候補は、マウス左クリックまたはEnterキーで確定します。(fixイベント発行)
確定した場合、SelectListのラベルがTextInputに設定されます。ラベルについては、SelectListのlabelProviderプロパティを参照してください。
確定した場合または候補がない場合は、SelectListは消えます。

候補リストに指定されたSelectListのプロパティやスタイルプロパティは、以下のように変更されます。

名前		変更後の値
プロパティ	tabIndex	-1
スタイルプロパティ	position	absolute
	top, left	TextInputの入力部分の左下の座標
	width	(adjustプロパティがtrueの場合だけ)TextInputの入力部分のwidth
	visibility	hidden
	zIndex	TextInputのzIndex+1

■記述形式

<div rcf:type="AutoCompleter"></div>

または

<span rcf:type="AutoCompleter"></span>

子要素は記述できません。
本部品は画面に表示されないため、<div>タグおよび<span>タグのどちらで記述しても違いはありません。

■プロパティ

表の項目の意味は、“表の項目の意味”を参照してください。

名前	データ型	説明	省略	省略値	属性指定	更新	部分更新
target	String	機能付加対象のTextInputのrcf:idを指定します。	不可	-	値	不可	不可
list	String	候補を表示するSelectListのrcf:idを指定します。	不可	-	値	不可	不可
adjust	Boolean	SelectListの幅を変更するかどうかを指定します。 true:候補を表示するSelectListの幅を、機能付加対象のTextInputの幅に合わせる false:SelectListの幅は変更しない	可	true	値	不可	不可
completer	complete関数を持つオブジェクト	キー入力操作ごとに候補の配列を作成する関数です。パラメタは以下の2つです。 value: TextInputの現在の文字列 callback: 候補リストに表示するデータの配列を渡す関数配列のメンバは、String型、Object型、またはArray型	可	デフォルトcompleter (注)	値	不可	不可

そのほかにも、画面部品および機能付加部品で共通のプロパティを指定することができます。詳細は、“画面部品共通プロパティ”、および“機能付加部品共通プロパティ”を参照してください。

注) デフォルトcompleter
開発初期段階でJavaScriptを記述しなくても動きを確認できるよう、以下の配列をコールバック関数に返します。

[
  value + "0", //現在のtextプラス0から9の数字を付けたメンバ数10の配列
  ...
  value + "9"
]

[completerの例(ローカル)]

<script type="text/javascript">
//<![CDATA[
  var user_obj = {
/**
 * param value TextInputの文字列
 * param callback 候補リストを渡す関数
 */
complete: function(value, callback) {
                //
                //候補一覧の配列を作成しコールバック関数に渡します。
                //
                var ret = ['候補1', '候補2', '候補3'];
                callback(ret);  //自発的にコールバック関数の呼出しを行う。
    }
  }
//]]>
</script>

<div rcf:id="input0" rcf:type="TextInput"></div>
<div rcf:id="output0" rcf:type="SelectList"></div>
<div rcf:type="AutoCompleter" rcf:target="input0" rcf:list="output0" rcf:completer="user_obj"></div>

[completerの例(非同期通信時)クライアント側]

<script type="text/javascript">
//<![CDATA[
  var user_obj = {
    complete: function(value, callback) {
      var uiSet2Bean = {
        keyword:value
      };
          
      var reqParam = {
        beanId:"UiSet2Bean",
        verb:"search"
      };
          
      var option = {
        url:"acf/apc",
        callback:function(res){
          callback(res.menu);
        }
      };
      UjiRequest.send(uiSet2Bean,reqParam,option);
    }
  }
//]]>
</script>

<div rcf:id="autoCompleterInput" rcf:type="TextInput" rcf:value="parts-"></div>
<div rcf:id="autoCompleterList" rcf:type="SelectList"></div>
<div rcf:type="AutoCompleter" rcf:target="autoCompleterInput"
     rcf:list="autoCompleterList" rcf:completer="user_obj"></div>

[completerの例(非同期通信時)サーバ側ビジネスクラス]

  public Object search(DispatchContext context, uiSet2.UiSet2Bean dataBean) {
    /* keywordで開始される文字をAutoCompleterのメニューとして返します */

    String keyword = dataBean.getKeyword();
    ArrayList menu = new ArrayList();

    for (int i=0;i<MENULIST.length;i++){
      if(MENULIST[i].startsWith(keyword)){
        menu.add(MENULIST[i]);
      }
    }
    dataBean.setMenu(menu);
    return dataBean;
  }

非同期通信によって入力値の候補をサーバアプリケーションから取得する場合は、上記のほかにもApcoordinator連携に必要なコマンドマップやデータBeanがあります。

非同期通信によって入力値の候補を取得するサンプル(uiSet2)については、“ユーザーズガイド”の“サンプルアプリケーション”を参照してください。

■イベントリスナ

名前	説明	イベントオブジェクト
onFix	入力値が確定した場合に呼ばれます。	ValueChangeEvent

■JavaScript API

固有のAPIはありません。部品共通のJavaScript APIは、“画面部品共通JavaScript API”を参照してください。

■補足事項

IMEの候補リストの表示タイミング
IMEが有効になっている場合、候補リストが表示されるタイミングは、ブラウザによって異なります。

IMEの変換中にも、候補リストが表示されます。(ただし、候補の選択ができるのは、変換を完了してからです。)
IMEの変換が完了した時点で、リストが表示されます。

候補リスト非表示のタイミング
表示された候補リストは、以下のどれかのタイミングで非表示となります。

候補を確定した場合
ユーザの入力により、確定候補がなくなった場合(complete()関数が空の配列を返した場合など)
機能を付加したTextInput部品がフォーカスを失った場合(TextInput外部の領域をクリックしたり、Internet Explorerでブラウザのスクロールバーを操作した場合など)

adjust=falseとした場合のリストのサイズ
adjustプロパティをfalseにする場合には、SelectListにサイズを指定してください。
SelectListのサイズを指定しないでadjustプロパティをfalseにした場合、候補リストが正しく表示されません。

マウスによる候補選択時に発生するTextInputのイベント
マウスによる候補の選択を行った場合、Internet ExplorerではTextInputからフォーカスがいったん外れます。これは、Internet ExplorerとFirefoxのブラウザの動作の違いによるものです。そのため、Internet ExplorerとFirefoxでは、TextInputのイベント発生が異なります。

マウスによる候補選択時にいったんフォーカスが外れるため、そこでchangeイベントやblurイベントが発生します。また、そのあと、TextInputにフォーカスを戻しているため、focusイベントが発生します。
マウスによる候補選択時にフォーカスが外れないため、イベントは発生しません。

候補リストに指定されたSelectListのプロパティについて
候補リストに指定されたSelectListの以下のプロパティは、設定しても意味がありません。

options (complete関数の戻り値で上書きされます。)
multiple (falseに上書きされます。)
selectedIndex、selectedIndexes (optionsが頻繁に入れ替わるため、この値を直接扱う意味がありません。)

目次索引