セレクトボックスに次の挙動をさせたい
- 選択肢の中身を編集可能に
- 入力に応じて候補をしぼる
- ドロップダウンはそのまま
こういった挙動が必要な場面がありました。
その実装にちょうどいいライブラリを見つけました。
その名も jQuery Editable Select というもの
かなり使いやすくて便利だったので、
ここではその導入手順とかコード例をまとめておきます。
このページの目次
jQuery Editable Selectの導入と基本的な使い方
１．まずライブラリのJSとCSSを読み込んでおく
次のGitHubページからダウンロード可能
zipとしてダウンロードしたら次の２つを探します。
- dist/jquery-editable-select.min.js
- dist/jquery-editable-select.min.css
この２つを適当な場所で読み込みすればOKです。
|
1 2 3 4 5 6 |
<!-- 当然ながらjQueryも読込が必須 --> <script src="/path/to/jquery.min.js"></script> <!-- jQuery Editable Select 読み込み --> <script src="/path/to/jquery-editable-select.min.js"></script> <link href="/path/to/jquery-editable-select.min.css" rel="stylesheet" /> |
jQuery依存のライブラリなのでjQueryは先読み
CDN経由での読み込みもできるけど、読み込み速度とかCDNが落ちるなどのリスクを考えた場合、ローカルから読み込みさせた方が安全です。そこは各自の好みで
２．編集可能なセレクトボックスを作る＆初期化
では編集可能なセレクトボックスを作ってみます。
簡単に初期化手順をまとめると次の通り
１．HTMLから普通にセレクトボックス定義
▼ 例えばこのような感じで
|
1 2 3 4 5 6 7 8 9 |
<select id="editableSelect"> <option>CupCake</option> <option>Eclair</option> <option>Froyo</option> <option>Gingerbread</option> <option>Honeycomb</option> <option>KitKat</option> <option>Marshmallow</option> </select> |
ここは何か特殊なことをする必要ありません。
ここでは id="editableSelect" を割り振ってます。
２．jQueryからセレクトボックス初期化
|
1 2 3 |
$('#editableSelect').editableSelect({ filter: false }); |
上コードの editableSelect({...}) みたいにオプションを渡して初期化するだけ。オプションには色々渡せるんですが、入力内容に応じてドロップダウンを絞り込みさせたくないときは filter: false に設定しておいた方がいいです。
３．動的にoption要素を追加する（任意）
もちろんコード的にoption要素追加も可能
▼ 例えばこのようなコード
|
1 2 |
$('#editableSelect') .editableSelect('add', 'Cupcake'); |
このコードのように 'add' に対して追加テキストを渡すだけ。ちなみに第１引数を 'remove' に変えれば削除、 'clear' を渡せば全option要素削除とかもできます。
４．実際のセレクトボックスの見た目と挙動
▼ セレクトボックス編集時
▼ filter: true の場合の挙動
▼ filter: false の場合の挙動
ちなみにレイアウトはBootstrapを使ってます。デフォルトだと若干ダサイ見た目なので、デザインとかは各自で工夫してください。とりあえずBootstrapを使っとけば間違いなし
編集・選択イベントの発生を監視するには
それでここからが少し重要なところです。
このライブラリは次に対応してます。
- ドロップダウン選択時のイベント発火
- セレクトボックス表示時のイベント発火
- セレクトボックス終了時のイベント発火
でも問題なのがセレクトボックス編集時のイベント監視に対応してないってことです。デフォルトではドロップダウン選択時の値しか受け取れません。
そこでイベント監視には一工夫が必要です。
例えば次のイベント時に何かしたい場合・・
- ドロップダウン選択時
- セレクトボックス編集時
次のようなコードに書き変える必要があります。
▼ イベント監視を行うコード例
|
1 2 3 4 5 6 7 8 9 |
$('#editable-select').editableSelect({ filter: true }).on('select.editable-select', function (e, li) { console.log('text : ', li.text()); }); $('#editable-select').on('input', function(){ console.log('text : ', $(this).val()); }); |
まずドロップダウン選択時のイベントを 'select.editable-select' で監視、このイベントが発火したら li.text() から選択内容を取得可能です。
そしてそれとは別に 'input' を通してテキスト編集時のイベント発火も監視。こうしないとセレクトボックス編集時に何が入力されてるか分からないので要注意です。
以上、jQueryで編集可能なセレクトボックスでした。
色々便利なので気に入ってます。ではまた(^^)/~~~
