機能説明

  • コンボボックスコンポーネントです。セレクトボックスと違い、ユーザが直接入力することができます。
  • <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 List<?> コンボボックスに表示するデータを指定します -
無害化 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 プロパティは存在しません
JSP
<%
    final List<Map<String, String>> sampleList = new ArrayList<Map<String, String>>();

    for (int i = 1; i <= 3; ++i) {
        final Map<String, String> map = new HashMap<String, String>();

        map.put("label", "ラベル" + i);
        map.put("value", "value" + i);

        sampleList.add(map);
    }
%>

<script type="text/javascript">
  $(function() {
    $('#sampleId').on('imuicomboboxselect', function(event, ui) {
      alert(ui.item.label + 'を選択しました');
    });
  });

  function onOpen(event, ui) {
    alert('リストが開きました');
  }
</script>

<imui:combobox id="sampleId" list="<%= sampleList %>" onOpen="onOpen" />

replace メソッド

  • 表示中のリストの中身を書き換える場合に使用します。
  • 引数には新たに表示するリストを list 形式で指定します。
JSP
<%
    final List<Map<String, String>> sampleList = new ArrayList<Map<String, String>>();

    for (int i = 1; i <= 3; ++i) {
        final Map<String, String> map = new HashMap<String, String>();

        map.put("label", "ラベル" + i);
        map.put("value", "value" + i);

        sampleList.add(map);
    }
%>

<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>

<imui:combobox id="replaceSample" list="<%= sampleList %>" />
<imui:button id="replaceButton" value="項目書き換え" class="imui-button" />

add メソッド

  • 表示中のリストの中身を追加する場合に使用します。
  • 引数には新たに表示するリストを list 形式で指定します。
JSP
<%
    final List<Map<String, String>> sampleList = new ArrayList<Map<String, String>>();

    for (int i = 1; i <= 3; ++i) {
        final Map<String, String> map = new HashMap<String, String>();

        map.put("label", "ラベル" + i);
        map.put("value", "value" + i);

        sampleList.add(map);
    }
%>

<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>

<imui:combobox id="addSample" list="<%= sampleList %>" />
<imui:button id="addButton" value="項目追加" class="imui-button" />

remove メソッド

  • 表示中のリストの中身を削除する場合に使用します。
  • 引数には削除したいリストを list 形式で指定します。
JSP
<%
    final List<Map<String, String>> sampleList = new ArrayList<Map<String, String>>();

    for (int i = 1; i <= 3; ++i) {
        final Map<String, String> map = new HashMap<String, String>();

        map.put("label", "ラベル" + i);
        map.put("value", "value" + i);

        sampleList.add(map);
    }
%>

<script type="text/javascript">
  var deleteList = [
    {
      label : 'ラベル1',
      value : 'value1'
    },
    {
      label : 'ラベル3',
      value : 'value3'
    }
  ];

  $(function() {
    $('#deleteButton').on('click', function() {
       $('#deleteSample').imuiCombobox('remove', deleteList);
    });
  });
</script>

<imui:combobox id="deleteSample" list="<%= sampleList %>" />
<imui:button id="deleteButton" value="項目削除" class="imui-button"/>

キーボード操作

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

list

list
  • コンボボックスで表示するリストを指定します。
  • 配列の要素は、以下のプロパティをもつ Map または 単に文字列を指定します。
  • Map を指定する場合、すべての要素について、label か value のどちらかを必ず統一して指定してください。
    • ある要素では label プロパティのみ、別の要素では value プロパティのみといった指定はできません。
注釈 属性名 説明
無害化 value String コンボボックスのリスト選択時にテキストボックスに入力される文字列
無害化国際化label String コンボボックスのリストに表示される文字列
JSP
<%
    final List<String> sampleList = Arrays.asList(new String[] { "sample0", "sample1", "sample2", "sample3", "sample4", "sample5", "sample6", "sample7", "sample8", "sample9" });
    final List<Map<String, String>> sampleObjList = new ArrayList<Map<String, String>>();

    for (int i = 0; i <= 5; ++i) {
        final Map<String, String> map = new HashMap<String, String>();

        map.put("value", "サンプル" + i);
        map.put("label", "sample" + i);

        sampleObjList.add(map);
    }
%>

<imui:combobox list="<%= sampleList %>" />
<imui:combobox list="<%= sampleObjList %>" />

maxHeight

maxHeight
  • maxHeight を指定することで、リストの縦幅の最大長を指定できます。
  • 必要に応じて、リストにスクロールバーが表示されます。
JSP
<%
    final List<String> sampleList = Arrays.asList(new String[] { "sample0", "sample1", "sample2", "sample3", "sample4", "sample5", "sample6", "sample7", "sample8", "sample9" });
%>

<imui:combobox list="<%= sampleList %>" maxHeight="100px" />

parentStyle

  • parentStyle 属性を使用することで、コンボボックスタグが出力する HTML の一番の親要素に対し、style を指定できます。
JSP
<%
    final List<String> sampleList = Arrays.asList(new String[] { "sample0", "sample1", "sample2", "sample3", "sample4", "sample5", "sample6", "sample7", "sample8", "sample9" });
%>

<imui:combobox id="showSample" list="<%= sampleList %>" parentStyle="display: none" />
<imui:button id="showButton" value="表示" class="imui-button" />
<script type="text/javascript">
  $('#showButton').on('click', function() {
    $('#showSample').parent().css('display', '');
  });
</script>

placeholder

placeholder
  • HTML5 に対応したブラウザでは、placeholder を表示できます。
JSP
<%
    final List<String> sampleList = Arrays.asList(new String[] { "sample0", "sample1", "sample2", "sample3", "sample4", "sample5", "sample6", "sample7", "sample8", "sample9" });
%>

<imui:combobox list="<%= sampleList %>" placeholder="placeholder" />

plainParameter

plainParameter
  • plainParameter 属性を用いて autoFocus, position パラメータを指定します。
JSP
<%
    final List<String> sampleList = Arrays.asList(new String[] { "sample0", "sample1", "sample2", "sample3", "sample4", "sample5", "sample6", "sample7", "sample8", "sample9" });
%>

<imui:combobox list="<%= sampleList %>" plainParameter="position: { my: 'left bottom', at: 'left top' }, autoFocus: true" />