JavaScriptで完全に機能するカスタマイズ可能な編集可能なコンボボックスを作成すると、事前に定義されたリストからの選択と新しい値の入力の両方を許可することにより、ユーザーインタラクションが向上します。このチュートリアルでは、HTML、CSS、JavaScriptを使用した手動実装と、Select2ライブラリを活用した効率的なアプローチの2つの方法について説明します。
目次
方法1：カスタム編集可能なコンボボックスの作成
この方法は、きめ細かい制御と基礎となるメカニズムの深い理解を提供します。入力フィールドとオプションを表示するための非表示の順序なしリストを組み合わせます。
最初に、HTML構造を設定しましょう。
<div class="combobox">
<input type="text" id="comboboxInput" placeholder="選択または入力...">
<ul id="comboboxList"></ul>
</div>
次に、スタイル設定のためのCSSを追加します。
.combobox {
position: relative;
display: inline-block;
}
.combobox input {
width: 200px;
padding: 5px;
border: 1px solid #ccc;
}
.combobox ul {
position: absolute;
list-style: none;
padding: 0;
margin: 0;
border: 1px solid #ccc;
background-color: white;
display: none; /* デフォルトで非表示 */
}
.combobox li {
padding: 5px;
cursor: pointer;
}
.combobox li:hover {
background-color: #f0f0f0;
}
最後に、機能を処理するためのJavaScriptです。
const input = document.getElementById('comboboxInput');
const list = document.getElementById('comboboxList');
let options = ['Option 1', 'Option 2', 'Option 3'];
input.addEventListener('input', () => {
list.innerHTML = '';
const filter = input.value.toLowerCase();
options.forEach(option => {
if (option.toLowerCase().includes(filter)) {
const item = document.createElement('li');
item.textContent = option;
item.addEventListener('click', () => {
input.value = option;
list.style.display = 'none';
});
list.appendChild(item);
}
});
list.style.display = input.value ? 'block' : 'none';
});
input.addEventListener('focus', () => {
list.style.display = 'block';
});
input.addEventListener('blur', () => {
setTimeout(() => {
list.style.display = 'none';
}, 100);
});
// 新しいオプション機能の追加（例）
input.addEventListener('keydown', (event) => {
if (event.key === 'Enter' && !options.includes(input.value)) {
options.push(input.value);
list.style.display = 'none';
input.value = ''; //追加後に入力クリア
}
});
方法2：Select2ライブラリの使用
Select2はプロセスを大幅に簡素化します。Select2のCSSファイルとJavaScriptファイルをプロジェクトに含めます（Select2の公式ウェブサイトからダウンロードするか、CDNを使用できます）。次に、選択要素でSelect2を初期化します。
<select id="mySelect">
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>
<script>
$('#mySelect').select2({
tags: true, // 新しいオプションの追加を有効にする
allowClear: true // 選択のクリアを許可する
});
</script>
tags: trueオプションにより、コンボボックスを編集可能にし、ユーザーは初期リストに存在しない新しいオプションを追加できます。allowClear: trueオプションは、選択をクリアする方法を提供します。
編集可能なコンボボックスの機能強化
選択した方法に関係なく、次の機能強化を検討してください。
- 永続性：ローカルストレージまたはサーバー側のデータベースを使用してオプションを保存し、セッション全体で保持します。
- 検証：無効なエントリを防ぐために、入力検証を実装します。
- スタイル設定：CSSを使用して外観をカスタマイズし、アプリケーションのデザインにシームレスに統合します。
- リモートデータソース：大規模なデータセットの場合、AJAX呼び出しを使用してオプションを動的に取得します。