セレクトボックスを超高機能に jQueryプラグイン「Select2」

jQuery

2013.06.11

機能はセレクトボックスだけど、複数選択させたいとか、テキスト検索もさせたいとビジュアルアイコンを入れたいとか・・とにかくブラウザ標準のセレクトボックスでは表現できない時に選択肢として覚えておきたいjQueryプラグイン「Select2」

ちなみに「Select2」の2はスタンダードな第二のセレクトボックスって意味でプラグインのバージョンを指してる訳ではないです。

標準的な使い方

マルチセレクト・複数選択

$("#e9").select2();

テンプレート・ビジュアル化

function format(state) {
    if (!state.id) return state.text;
    return "" + state.text;
}
$("#e4").select2({
    formatResult: format,
    formatSelection: format,
    escapeMarkup: function(m) { return m; }
});

リモート・APIを使ったコールバック

$("#e7").select2({
    placeholder: "Search for a movie",
    minimumInputLength: 3,
    ajax: {
        url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json",
        dataType: 'jsonp',
        quietMillis: 100,
        data: function (term, page) {
            return {
                q: term,
                page_limit: 10,
                page: page,
                apikey: "ju6z9mjyajq2djue3gbvv26t"
            };
        },
        results: function (data, page) {
            var more = (page * 10) < data.total;
            return {results: data.movies, more: more};
        }
    },
    formatResult: movieFormatResult,
    formatSelection: movieFormatSelection,
    dropdownCssClass: "bigdrop",
    escapeMarkup: function (m) { return m; }
});