Wijmo MultiSelect フィルタリング

by Wijmo5_jp

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/cultures/wijmo.culture.ja.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<div class="container-fluid">
  <label><input type="checkbox" id="showFilterInput" checked> フィルタリングを有効</label><br>
  <label><input type="checkbox" id="checkOnFilter" checked> フィルタリングされた項目を自動的に選択</label><br>
  <div id="multiSelect"></div>
</div>

CSS

body {
  margin: 50px 0;
}

JavaScript

document.readyState === 'complete' ? init() : window.onload = init;
function init() {
  var multiSelect = new wijmo.input.MultiSelect('#multiSelect', {
    itemsSource: countryNames,
    showFilterInput: true,
    checkOnFilter: true
  });
  document.getElementById('showFilterInput').addEventListener('change', function (e) {
    multiSelect.showFilterInput = e.target.checked;
  });
  document.getElementById('checkOnFilter').addEventListener('change', function (e) {
    multiSelect.checkOnFilter = e.target.checked;
  });
}

var countryNames = ['アメリカ', '日本', '中国', 'ドイツ', 'イギリス', 'アフガニスタン', 'アルバニア', 'アルジェリア', 'アメリカ領サモア', 'アンドラ', 'アンゴラ', 'アングィラ', 'アンティグア', 'アルゼンチン', 'アルメニア', 'アルバ', 'オーストラリア', 'オーストリア', 'アゼルバイジャン', 'バハマ', 'バーレーン', 'バングラデシュ', 'バルバドス', 'ベラルーシ', 'ベルギー', 'ベリーズ', 'ベニン', 'バミューダ', 'ブータン', 'ボリビア', 'ボネール島', 'ボスニア', 'ボツワナ', 'ブラジル', 'ブルネイ', 'ブルガリア', 'ブルキナファソ', 'ブルンジ', 'カンボジア', 'カメルーン', 'カナダ', 'カナリア諸島', 'カーボベルデ', 'ケイマン諸島', '中央アフリカ共和国', 'チャド', 'チャネル諸島', 'チリ', 'クリスマス島', 'ココス島', 'コロンビア', 'コモロ', 'コンゴ', 'クック諸島', 'コスタリカ', 'コートジボワール', 'クロアチア', 'キューバ', 'キュラソー', 'キプロス', 'チェコ共和国', 'デンマーク', 'ジブチ', 'ドミニカ', 'ドミニカ共和国', '東チモール', 'エクアドル', 'エジプト', 'エルサルバドル', '赤道ギニア', 'エリトリア', 'エストニア', 'エチオピア', 'フォークランド諸島', 'フェロー諸島', 'フィジー', 'フィンランド', 'フランス', '仏領ギアナ', 'フランス領ポリネシア', 'フランス南部テル', 'ガボン', 'ガンビア', 'ジョージア', 'ガーナ', 'ジブラルタル', 'ギリシャ', 'グリーンランド', 'グレナダ', 'グアドループ島', 'グアム', 'グアテマラ', 'ギニア', 'ガイアナ', 'ハイチ', 'ホンジュラス', '香港', 'ハンガリー', 'アイスランド', 'インド', 'インドネシア', 'イラン', 'イラク', 'アイルランド', 'マン島', 'イスラエル', 'イタリア', 'ジャマイカ', 'ヨルダン', 'カザフスタン', 'ケニア', 'キリバス', '北朝鮮', '韓国', 'クウェート', 'キルギスタン', 'ラオス', 'ラトビア', 'レバノン', 'レソト', 'リベリア', 'リビア', 'リヒテンシュタイン', 'リトアニア', 'ルクセンブルク', 'マカオ', 'マケドニア', 'マダガスカル', 'マレーシア', 'マラウイ', 'モルディブ', 'マリ', 'マルタ', 'マーシャル諸島', 'マルティニーク島', 'モーリタニア', 'モーリシャス', 'マヨット島', 'メキシコ', 'ミッドウェー諸島', 'モルドバ', 'モナコ', 'モンゴル', 'モントセラト', 'モロッコ', 'モザンビーク', 'ミャンマー', 'ナンビア', 'ナウル', 'ネパール', 'オランダ領アンティル', 'オランダ', 'ネビス島', 'ニューカレドニア', 'ニュージーランド', 'ニカラグア', 'ニジェール', 'ナイジェリア', 'ニウエ', 'ノーフォーク島', 'ノルウェー', 'オマーン', 'パキスタン',...