jQueryで編集可能なセレクトボックス(select)を作ってみた

セレクトボックスに次の挙動をさせたい

  • 選択肢の中身を編集可能に
  • 入力に応じて候補をしぼる
  • ドロップダウンはそのまま

こういった挙動が必要な場面がありました。

その実装にちょうどいいライブラリを見つけました。

その名も jQuery Editable Select というもの

かなり使いやすくて便利だったので、
ここではその導入手順とかコード例をまとめておきます。

jQuery Editable Selectの導入と基本的な使い方

1.まずライブラリのJSとCSSを読み込んでおく

次のGitHubページからダウンロード可能

zipとしてダウンロードしたら次の2つを探します。

  • dist/jquery-editable-select.min.js
  • dist/jquery-editable-select.min.css

この2つを適当な場所で読み込みすればOKです。

jQuery依存のライブラリなのでjQueryは先読み

CDN経由での読み込みもできるけど、読み込み速度とかCDNが落ちるなどのリスクを考えた場合、ローカルから読み込みさせた方が安全です。そこは各自の好みで

2.編集可能なセレクトボックスを作る&初期化

では編集可能なセレクトボックスを作ってみます。

簡単に初期化手順をまとめると次の通り

 

1.HTMLから普通にセレクトボックス定義

▼ 例えばこのような感じで

ここは何か特殊なことをする必要ありません。

ここでは id="editableSelect"  を割り振ってます。

 

2.jQueryからセレクトボックス初期化

上コードの editableSelect({...})  みたいにオプションを渡して初期化するだけ。オプションには色々渡せるんですが、入力内容に応じてドロップダウンを絞り込みさせたくないときは filter: false  に設定しておいた方がいいです。

 

3.動的にoption要素を追加する(任意)

もちろんコード的にoption要素追加も可能

▼ 例えばこのようなコード

このコードのように 'add'  に対して追加テキストを渡すだけ。ちなみに第1引数を 'remove'  に変えれば削除、 'clear'  を渡せば全option要素削除とかもできます。

 

4.実際のセレクトボックスの見た目と挙動

▼ セレクトボックス編集時

セレクトボックス編集時の見た目。普通のセレクトボックスと違って編集とか絞り込みもできる

▼ filter: true の場合の挙動

オプションの filter: true 挙動。入力時に該当するoption要素だけが表示される

▼ filter: false の場合の挙動

オプションの filter: true 挙動。入力に関わらず全option要素が表示される

ちなみにレイアウトはBootstrapを使ってます。デフォルトだと若干ダサイ見た目なので、デザインとかは各自で工夫してください。とりあえずBootstrapを使っとけば間違いなし

編集・選択イベントの発生を監視するには

それでここからが少し重要なところです。

このライブラリは次に対応してます。

  • ドロップダウン選択時のイベント発火
  • セレクトボックス表示時のイベント発火
  • セレクトボックス終了時のイベント発火

でも問題なのがセレクトボックス編集時のイベント監視に対応してないってことです。デフォルトではドロップダウン選択時の値しか受け取れません。

そこでイベント監視には一工夫が必要です。

 

例えば次のイベント時に何かしたい場合・・

  • ドロップダウン選択時
  • セレクトボックス編集時

次のようなコードに書き変える必要があります。

▼ イベント監視を行うコード例

まずドロップダウン選択時のイベントを 'select.editable-select'  で監視、このイベントが発火したら li.text()  から選択内容を取得可能です。

そしてそれとは別に 'input'  を通してテキスト編集時のイベント発火も監視。こうしないとセレクトボックス編集時に何が入力されてるか分からないので要注意です。

以上、jQueryで編集可能なセレクトボックスでした。

色々便利なので気に入ってます。ではまた(^^)/~~~