[ComboBox] 空白文字を削除するかどうか

by Wijmo5_jp

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://demo.grapecity.com/wijmo/sample/scripts/sample.js"></script>
<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">

  <h1>空白文字を削除するかどうか</h1>
  <p>ComboBox.trimTextプロパティが追加され、文字列の前後の空白を削除するかどうか指定できるようになりました。従来のバージョンでは、文字列の前後の空白は必ず削除されていました。</p>
  <input type="checkbox" id="trimText" onchange="update()">
  <label for="trimText">空白文字を削除する</label><br>
  <div id="comboBox"></div>

</div>

CSS

.no-trim .wj-listbox-item {
  white-space: pre;
}

JavaScript

var comboBox = new wijmo.input.ComboBox('#comboBox', {
  trimText: false,
  dropDownCssClass: 'no-trim',
  itemsSource: [' 前の半角スペース', '後ろの半角スペース ', '　前の全角スペース', '後ろの全角スペース　']
});

function update() {
  comboBox.trimText = document.getElementById('trimText').checked;
  comboBox.dropDownCssClass = comboBox.trimText ? '' : 'no-trim';
  comboBox.invalidate();
}