スクリプト開発向けタグライブラリ

imuiCombobox

コンポーネント情報
モジュールim_ui
導入されたバージョン8.0.8
バージョン8.0.8

機能説明

  • コンボボックスコンポーネントです。セレクトボックスと違い、ユーザが直接入力することができます。
注意事項
  • <input type="text"> にのみ指定した属性が適用されます。
    • <input type="text"> の親要素に属性を指定したい場合、parentStyle 属性を利用してください。
  • 要素を非表示にしたい場合、hidden 属性を利用することはできません。代わりに parentStyle=“display: none” を使用してください。

属性一覧

注釈 属性名 型 説明 省略時の動作
HTML5
Boolean属性 		autofocus boolean 画面表示時に、コンボボックスにフォーカスをあてます false
Boolean属性 disabled boolean コンボボックスを無効化します false
id string コンボボックスのidです 代替idを付与
list Array コンボボックスに表示するデータを指定します -
無害化 maxHeight string コンボボックスの入力エリア下に表示されるドロップダウンリストの高さの最大値を指定します
単位に % を指定した場合、body 要素に対する割合になります。		 -
name string コンボボックスのnameです 代替nameを付与
onChange string onChangeイベント時に実行する関数名を指定します
詳細は こちら を参照してください		 -
onClose string onCloseイベント時に実行する関数名を指定します
詳細は こちら を参照してください		 -
onCreate string onCreateイベント時に実行する関数名を指定します
詳細は こちら を参照してください		 -
onFocus string onFocusイベント時に実行する関数名を指定します
詳細は こちら を参照してください		 -
onOpen string onOpenイベント時に実行する関数名を指定します
詳細は こちら を参照してください		 -
onSearch string onSearchイベント時に実行する関数名を指定します
詳細は こちら を参照してください		 -
onSelect string onSelectイベント時に実行する関数名を指定します
詳細は こちら を参照してください		 -
無害化 parentStyle string コンボボックスタグが出力する HTML の一番の親要素に対し、style を指定します -
HTML5
国際化 無害化 		placeholder string プレースホルダーを指定します -
plainParameter string コンボボックスの初期化時に追加で渡したいオプションを指定します
本属性に渡したオプションは無害化されずそのまま出力されます		 -
HTML5
Boolean属性 		required boolean コンボボックスの入力を必須にします false
国際化 無害化 selected string コンボボックスに初期表示するデータを指定します
list 属性に指定した配列中のデータのうち、初期表示したい値を指定してください		 -
無害化 width string コンボボックスの input タグの横幅を指定します
width=“400” の様に単位を省略すると px として扱われます
単位に % は使用できません		 auto
無害化 その他 string ユーザ定義属性です -

サンプル

イベント

  • 以下のイベントがあります。
属性名イベント名 起動条件
onChangeimuicomboboxchangeコンボボックスのリストから項目を選択し、フォーカスが外れた時
onClose imuicomboboxclose コンボボックスのリストを閉じた時
onCreateimuicomboboxcreateコンボボックス生成時
onFocus imuicomboboxfocus コンボボックスのリストにフォーカスが入った時
onOpen imuicomboboxopen コンボボックスのリストを開いた時
onSearchimuicomboboxsearchコンボボックスのリストを表示する直前
onSelectimuicomboboxselectコンボボックスのリストから項目を選択した時
  • すべてのイベントの引数は以下になります。
引数 型 説明 備考
プロパティ名型
第一引数jQuery.Event コンボボックスが持つイベントオブジェクト
第二引数Object item jQuery イベントを発火したコンボボックスのリストの要素onClose, onCreate, onOpen, onSearch では空オブジェクトが渡るため、item プロパティは存在しません
サーバサイド JavaScript
var sampleList = [
    {
        label: 'ラベル1',
        value: 'value1'
    },
    {
        label: 'ラベル2',
        value: 'value2'
    },
    {
        label: 'ラベル3',
        value: 'value3'
    }
];
HTML
<script type="text/javascript">
  $(function() {
    $('#sampleId').on('imuicomboboxselect', function(event, ui) {
      alert(ui.item.label + 'を選択しました');
    });
  });

  function onOpen(event, ui) {
    alert('リストが開きました');
  }
</script>
<imart type="imuiCombobox" id="sampleId" list=sampleList onOpen="onOpen" />

replace メソッド

  • 表示中のリストの中身を書き換える場合に使用します。
  • 引数には新たに表示するリストを list 形式で指定します。
サーバサイド JavaScript
var sampleList = [
    {
        label: 'ラベル1',
        value: 'value1'
    },
    {
        label: 'ラベル2',
        value: 'value2'
    },
    {
        label: 'ラベル3',
        value: 'value3'
    }
];
HTML
<script type="text/javascript">
  var replaceList = [
    {
      label : 'newLabel1',
      value : 'val1'
    },
    {
      label : 'newLabel2',
      value : 'val2'
    },
    {
      label : 'newLabel3',
      value : 'val3'
    }
  ];
  $(function() {
    $('#replaceButton').on('click', function() {
      $('#replaceSample').imuiCombobox('replace', replaceList);
    });
  });
</script>
<imart type="imuiCombobox" id="replaceSample" list=sampleList />
<imart type="imuiButton" id="replaceButton" value="項目書き換え" class="imui-button" />

add メソッド

  • 表示中のリストの中身を追加する場合に使用します。
  • 引数には新たに表示するリストを list 形式で指定します。
サーバサイド JavaScript
var sampleList = [
    {
        label: 'ラベル1',
        value: 'value1'
    },
    {
        label: 'ラベル2',
        value: 'value2'
    },
    {
        label: 'ラベル3',
        value: 'value3'
    }
];
HTML
<script type="text/javascript">
  var addList = [
    {
      label : 'addLabel1',
      value : 'addVal1'
    },
    {
      label : 'addLabel2',
      value : 'addVal2'
    },
    {
      label : 'addLabel3',
      value : 'addVal3'
    }
  ];
  $(function() {
    $('#addButton').on('click', function() {
      $('#addSample').imuiCombobox('add', addList);
    });
  });
</script>
<imart type="imuiCombobox" id="addSample" list=sampleList />
<imart type="imuiButton" id="addButton" value="項目追加" class="imui-button" />

remove メソッド

  • 表示中のリストの中身を削除する場合に使用します。
  • 引数には削除したいリストを list 形式で指定します。
サーバサイド JavaScript
var sampleList = [
    {
        label: 'ラベル1',
        value: 'value1'
    },
    {
        label: 'ラベル2',
        value: 'value2'
    },
    {
        label: 'ラベル3',
        value: 'value3'
    }
];
HTML
<script type="text/javascript">
  var deleteList = [
    {
      label : 'ラベル1',
      value : 'value1'
    },
    {
      label : 'ラベル3',
      value : 'value3'
    }
  ];

  $(function() {
    $('#deleteButton').on('click', function() {
       $('#deleteSample').imuiCombobox('remove', deleteList);
    });
  });
</script>
<imart type="imuiCombobox" id="deleteSample" list=sampleList />
<imart type="imuiButton" id="deleteButton" value="項目削除" class="imui-button"/>

キーボード操作

  • コンボボックスのリストをクリックや tab 移動でフォーカスを当てた場合にキーボードでの操作が可能になります。
    • 上矢印
      • 一個上の項目に移動します。
    • 下矢印
      • 一個下の項目に移動します。
    • PageUp
      • 表示中のリストの最初の項目に移動します。
    • PageDown
      • 表示中のリストの最後の項目に移動します。
    • Enter
      • 項目を選択し、メニューを閉じます。

list

list
  • コンボボックスで表示するリストを指定します。
  • 配列の要素は、以下のプロパティをもつオブジェクトか、または、単に文字列を指定します。
  • オブジェクトを指定する場合、すべての要素について、label か value のどちらかを必ず統一して指定してください。
    • ある要素では label プロパティのみ、別の要素では value プロパティのみといった指定はできません。
注釈 属性名型 説明
無害化 value string コンボボックスのリスト選択時にテキストボックスに入力される文字列
無害化国際化label string コンボボックスのリストに表示される文字列
サーバサイド JavaScript
var sampleList = ['sample0', 'sample1', 'sample2', 'sample3', 'sample4', 'sample5', 'sample6', 'sample7', 'sample8', 'sample9'];

var sampleObjList = [
    {
    	value: 'サンプル0',
    	label: 'sample0'
    },
    {
    	value: 'サンプル1',
    	label: 'sample1'
    },
    {
    	value: 'サンプル2',
    	label: 'sample2'
    },
    {
    	value: 'サンプル3',
    	label: 'sample3'
    },
    {
    	value: 'サンプル4',
    	label: 'sample4'
    },
    {
    	value: 'サンプル5',
    	label: 'sample5'
    }
];
HTML
<imart type="imuiCombobox" list=sampleList />
<imart type="imuiCombobox" list=sampleObjList />

maxHeight

maxHeight
  • maxHeight を指定することで、リストの縦幅の最大長を指定できます。
  • 必要に応じて、リストにスクロールバーが表示されます。
サーバサイド JavaScript
var sampleList = ['sample0', 'sample1', 'sample2', 'sample3', 'sample4', 'sample5', 'sample6', 'sample7', 'sample8', 'sample9'];
HTML
<imart type="imuiCombobox" list=sampleList maxHeight="100px" />

parentStyle

  • parentStyle 属性を使用することで、コンボボックスタグが出力する HTML の一番の親要素に対し、style を指定できます。
サーバサイド JavaScript
var sampleList = ['sample0', 'sample1', 'sample2', 'sample3', 'sample4', 'sample5', 'sample6', 'sample7', 'sample8', 'sample9'];
HTML
<imart type="imuiCombobox" id="showSample" list=sampleList parentStyle="display: none" />
<imart type="imuiButton" id="showButton" value="表示" class="imui-button" />
<script type="text/javascript">
  $('#showButton').on('click', function() {
    $('#showSample').parent().css('display', '');
  });
</script>

placeholder

placeholder
  • HTML5 に対応したブラウザでは、placeholder を表示できます。
サーバサイド JavaScript
var sampleList = ['sample0', 'sample1', 'sample2', 'sample3', 'sample4', 'sample5', 'sample6', 'sample7', 'sample8', 'sample9'];
HTML
<imart type="imuiCombobox" list=sampleList placeholder="placeholder" />

plainParameter

plainParameter
  • plainParameter 属性を用いて autoFocus, position パラメータを指定します。
サーバサイド JavaScript
var sampleList = ['sample0', 'sample1', 'sample2', 'sample3', 'sample4', 'sample5', 'sample6', 'sample7', 'sample8', 'sample9'];
HTML
<imart type="imuiCombobox" list=sampleList plainParameter="position: { my: 'left bottom', at: 'left top' }, autoFocus: true" />

Copyright © 2012 NTT DATA INTRAMART CORPORATION