MultiAutoComplete - キーボード操作

by Wijmo5_jp

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://codepen.io/wijmo-jp/pen/obRVjx.js"></script>
<div id="multiAutoComplete"></div>
<p>MultiAutoCompleteコントロールでは、次のキーボード操作が可能です。</p>
<table class="table table-condensed table-striped">
  <thead>
    <tr>
      <th>入力キー</th>
      <th>実行される操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Space、F4、Alt+上下</td>
      <td>ドロップダウンリストを開きます。</td>
    </tr>
    <tr>
      <td>上下</td>
      <td>ドロップダウンリストを開かずに前後の入力候補を表示します。</td>
    </tr>
    <tr>
      <td>Enter</td>
      <td>ドロップダウンリストを閉じて項目を追加します。</td>
    </tr>
    <tr>
      <td>Tab</td>
      <td>ドロップダウンリストを閉じずに項目を追加します。</td>
    </tr>
    <tr>
      <td>Esc</td>
      <td>ドロップダウンリストを閉じます。</td>
    </tr>
    <tr>
      <td>左右</td>
      <td>左右の項目を選択します。</td>
    </tr>
    <tr>
      <td>BackSpace、Delete</td>
      <td>項目を削除します。</td>
    </tr>
  </tbody>
</table>

JavaScript

var multiAutoComplete = new wijmo.input.MultiAutoComplete('#multiAutoComplete');
multiAutoComplete.itemsSource = sample.countries();
multiAutoComplete.displayMemberPath = 'name';
multiAutoComplete.placeholder = '国を入力してください';