まず、Selectpickerを使用するためには、Bootstrap 4のCSSとJavaScriptファイルを読み込む必要があります。以下のコードを<head>セクションに追加してください:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>次に、Selectpickerを使用したいフォーム要素を作成します。例えば、セレクトボックスを作成する場合、以下のようなコードを使用します:
<select class="selectpicker" data-live-search="true">
<option>選択肢1</option>
<option>選択肢2</option>
<option>選択肢3</option>
</select>上記の例では、selectpickerクラスを追加し、data-live-search属性を設定しています。data-live-search属性を設定すると、セレクトボックスに対してライブ検索機能が有効になります。
さらに、Selectpickerにはさまざまなオプションがあります。以下のコードは、いくつかの一般的なオプションの例です:
<select class="selectpicker" data-live-search="true" data-style="btn-primary" data-size="5" multiple>
<option>選択肢1</option>
<option>選択肢2</option>
<option>選択肢3</option>
</select>上記の例では、data-style属性を使用して選択ボックスのスタイルを指定し、data-size属性を使用して表示される選択肢の数を制限し、multiple属性を使用して複数の選択を有効にしています。
さらに、Selectpickerにはイベントやメソッドもあります。以下のコードは、選択肢が変更されたときにイベントを処理する方法の例です:
$('.selectpicker').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
// 選択肢が変更された時の処理
});上記の例では、changed.bs.selectイベントを使用して選択肢が変更されたときに処理を実行しています。
以上が、Bootstrap 4のSelectpickerを使用したフォーム要素のカスタマイズ方法の概要です。さまざまなオプションやイベントを試して、自分のプロジェクトに合わせたカスタマイズを行ってみてください。