« カラーパレット | トップページ | カレンダー »

2007年7月16日 (月)

コンボボックス

テキストボックスとリストボックスを組み合わせたコンボボックスを提供する。テキストボックスに文字を入力できるだけでなく、右端のボタンをクリックして選択できる入力候補を一覧表示する。

Dojoのコンボボックスでは、テキストボックスに文字を入力すると、途中までの入力に一致する候補を一覧表示する機能も提供する。この機能は英数字のみで動作する。

コンボボックスを使うときは、dojo.widget.ComboBoxをrequireする。

dojo.require("dojo.widget.ComboBox");

コンボボックスは、select要素に対して、dojoType属性をcomboboxとすることで作成できる。option要素を指定することで入力候補を指定する。入力候補はoption要素で指定した順番に表示されるため、option要素はあらかじめソートして指定する必要がある。

<select id="sample" dojoType="combobox">
  <option value="aa">aa</option>
  <option value="ab">ab</option>
  <option value="bb">bb</option>
  <option value="cc">cc</option>
</select>

autocomplete属性として"false"を指定すると、入力候補を一覧表示するだけで、選択しないと入力しないようになる。

maxListLength属性により、入力候補として一度に表示するリストの数を指定できる。以下の例では、maxListLengthとして2を指定している。

入力候補をファイル指定

入力候補をoption要素として指定するのではなく、JavaScriptファイルに候補一覧を指定することができる。 入力候補をJavaScriptファイルに記述して指定するときは、select要素ではなくinput要素にdojoType="combobox"を指定する。そして、入力候補を記述したJavaScriptファイルをdataUrl属性の値としてを指定する。

<input id="dataurl" dojotype="combobox" dataurl="/sample/comboBoxData.js" style="width: 300px;" />

JavaScript配列のファイルは2次元配列、連想配列、JSONのいずれかで指定できる。 以下に2次元配列の例を示す。

[
  ["Alabama","AL"],
  ["Alaska","AK"],
  ["American Samoa","AS"],
    ...
  ["Wyoming","WY"]
]

以下に連想配列の例を示す。

{"AL":"Alabama",
"AK":"Alaska",
"AS":"American Samoa",
...
"WY":"Wyoming"}

入力候補を全てJavaScriptファイルに記述する方法では、入力候補の数が多いときロードに時間がかかってしまう。入力するたびに入力候補のデータをサーバから取得することができる。mode属性の値としてremoteを指定し、dataUrl属性の値として %{searchString} を指定することで、文字を入力するたびに入力文字列を渡して、選択候補を取得することができる。

<input id="dataurl2" dojotype="combobox" dataUrl="/search?text=%{searchString}"  mode="remote" />

イベントハンドラ

onValueChanged属性としてfunctionを指定することで、コンボボックスで入力候補を選択したイベントを取得できる。

<input id="getvalue" dojotype="combobox" dataurl="/sample/comboBoxData.js"
onValueChanged="getVal1" style="width: 300px;" />

<script type="text/javascript" language="JavaScript">
function getVal1(val){
  alert(val);
}
</script>

コンボボックスの値を取得するだけであれば、dojo.widget.byId('getvalue').comboBoxValue.valueで、コンボボックスに入力されている値を取得できる。

<button onclick="getVal2">get value</button>

<script language="JavaScript" type="text/javascript">
function getVal2(){
  alert(dojo.widget.byId('getvalue').comboBoxValue.value);
}
</script>

動的な作成

動的にコンボボックスを作るときの例を以下に示す。

dojo.widget.createWidget("dojo:ComboBox", {name:"prog",autocomplete:false,dataUrl:"comboBoxData.js"}, dojo.byId("progCombo"));

« カラーパレット | トップページ | カレンダー »

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/232684/7169311

この記事へのトラックバック一覧です: コンボボックス:

« カラーパレット | トップページ | カレンダー »