オブジェクト

Q1
自動補完機能の実装方法  
A1

TextBoxクラスで自動補完(オートコンプリート)をする場合、以下、2パターンの実装方法がございます。

(1)TextBoxに文字を入力するタイミングで検索候補を表示する方法
TextBoxのAutoCompleteプロパティで実行が可能です。

入力候補はAddCandidateメソッドで追加します。
追加された候補は、ClearCandidateメソッドを実行するか、プロパティを設定したTextBoxが削除されるまで保存されます。
CSVファイルを候補一覧として読み込む事も可能です。

 [サンプル1]
Form Obj50_004_01 {
 …
 CSVDocument csvdata;
 csvdata.get("data.csv");
 …
 TextBox TextBox1 {
  …
  /*自動補完機能をONにする*/
  AutoComplete = $TRUE;
  
  /*候補一覧を登録する*/
  AddCandidate("Biz/Browser");
  AddCandidate("Biz/Designer");
  AddCandidate("Biz/Browser XE");
  AddCandidate("Biz/Designer XE");
  AddCandidate("Biz/Browser V");
  AddCandidate("Biz/Designer V");
 }
 Button Button1 {
  …
  Function OnTouch( e ) {
   /*TextBox1に入力された値を候補一覧に登録*/
   ^.TextBox1.AddCandidate(^.TextBox1.Value);
  }
 }
 …
 TextBox TextBox2 {
  …
  AutoComplete = $TRUE;
  
  /*候補一覧をCSVから読み込む*/
  AddCandidate(^.csvdata);
 }
}

(2)TextBoxに文字を入力し、Enterキーを押下したタイミングで検索候補を表示する方法
  Formとラベルを利用して、擬似的な入力候補一覧の表示を行う方法です。
  KeyDownイベントで、非表示になっている入力候補一覧のForm(ラベル)を表示します。

[サンプル2]
Form Obj50_004_02{
 …
 
 CSVDocument csvData;
 
 TextBox TextBox1 {
  X = 65;
  Y = 145;
  Width = 300;
  Height = 33;
 }

 …

 Form subForm {
  X = 65;
  Y = 178;
  Width = 300;
  Height = 115;
  Scroll = $NONE;
  
  /* 検索結果のプルダウン部分(ラベルで作成) */
  Label Labelpul[] {
   X = 0;
   Y = 0;
   Width = 300;
   Height = 15;
   BgColor = $WHITE;
   Visible = $FALSE;
   Function OnClicked( e ) {
    /* クリック時に選択したデータをテキストボックスに表示 */
    ^.^.TextBox1.Value = e.from.Value;
    ^.^.subForm.Visible = $FALSE;
    ^.^.subForm.Labelpul.Visible = $FALSE;
   }
  }
 }
 
 if ( !$DESIGNTIME ) {
  /* CSVデータ */
  this.csvData.get("data.csv");
  ^.Obj50_004_02.subForm.Visible = $FALSE;
 }
 
 Function OnKeyDown(e) {  
  /* テキストボックスに表示している値を取得 */
  var inputData = this.TextBox1.Value;
  
  /* 入力値の検索用変数 */
  var strData = "";
  var findResult = "";
  number idx = 0;
  
  /* KeyDownイベントで取得したKeyがEnterの場合 */
  if(e.Key == "RETURN"){
   
   /* プルダウン部分(ラベル)初期化 */
   this.subForm.Labelpul.truncate();
   
   for (var j = 0; j < this.csvData.Rows; j++){
    strData = this.csvData.GetCell(j, 0);
    if(strData != "" && inputData != ""){
     /* 入力された文字数分、候補からも文字列を取得 */
     findResult = strData.Substring(0,inputData.Length);
     
     if (lower(findResult) == lower(inputData)){
      /* 入力した文字列と候補の文字列が一致する場合 */
      /* プルダウン部分1行追加 */
      this.subForm.Labelpul.insert(1);
      /* 該当データをセット */
      this.subForm.Labelpul[idx].Value = strData;
      /* インデックス用変数を加算 */
      idx = idx + 1;
     }
    }
   }
   
   if(idx != 0){
    /* サブフォームの高さを計算(リストの行数分の高さに設定) */
    this.subForm.Height = this.subForm.Labelpul.Height * idx;
    /* プルダウン部分を表示する */
    this.subForm.Visible = $TRUE;
    this.subForm.Labelpul.Visible = $TRUE;
   }
  }
 }
 
 Function OnClicked( e ) {
  if(this.subForm.Labelpul.Visible = $TRUE){
   /* プルダウン部分を非表示にする */
   this.subForm.Visible = $FALSE;
   this.subForm.Labelpul.Visible = $FALSE;
  }
 }
}

実際の挙動については、CRSファイル形式のサンプル
   「自動補完機能の実装方法(Obj50_004.zip)」
をご確認ください。

管理番号:Obj50_004
  Biz-Collections Bizの宝箱 トップへ
  Biz/Browser V・Biz/Designer V TIPS集 トップへ