Home » スタッフBlog » Chosenプラグインでセレクトボックスを高品質に

Chosenプラグインでセレクトボックスを高品質に

category : スタッフBlog 2017.6.1 

技術部の小野寺です。

セレクトボックスに選択出来る候補が沢山あった場合に、スクロールして探しだすのは少々手間に感じることがあると思います。ですが、Chosen.jsというJSライブラリを使用することで、ボックス内で検索が出来るようになり利便性が上がります。

通常のセレクトボックスは以下のようなものですが

Chosenプラグインを使用した場合にはこのように検索エリアが出現しデザインも変化します。

検索値を入力した場合には入力文字を都度評価して候補のみを出現させてくれます。
もちろんこの状態から上下キーによる候補の選択、カーソルによる候補の選択も可能です。

Chosen.jsの導入はとても簡単で、以下のサイトからzipファイルをダウンロードし
https://github.com/harvesthq/chosen
ファイルを解凍しchosen.jquery.min.js、chosen.min.cssをインクルードするのみで使用可能です。
またChosenの動作にはjQueryが必要なのでjquery.min.jsのインクルードも忘れずに。


Chosenプラグインは日本語での利用も可能ですが、少々chosen.jquery.jsへのカスタマイズが必要となります。
カスタマイズせず使用すると、漢字「大」を入力するために「おお」と打ち込み漢字変換の確定をした時点で
勝手に一番上の要素が確定してしまいます。

これは日本語入力確定時のEnterという判定が入っていないために起こる現象のようです。
漢字を変換しその後その文字に応じた選択肢が選択出来るのが理想です。

日本語での使用ではchosen.jquery.js内で下記箇所を置き換えると可能となります。

1.AbstractChosen.prototype.keyup_checker = function内のcase:13へハイライトがあるときだけEnterで選択可能な処理追記

case 13:
evt.preventDefault();
/*
if (this.results_showing) {
this.result_select(evt);
}
*/
if (this.results_showing && $(“li”).hasClass(“highlighted”)) {
return this.result_select(evt);
}
break;

2.Chosen.prototype.winnow_results_set_highlight = function内のデフォルトハイライトを削除

Chosen.prototype.winnow_results_set_highlight = function() {
/*
var do_high, selected_results;
selected_results = !this.is_multiple ? this.search_results.find(“.result-selected.active-result”) : [];
do_high = selected_results.length ? selected_results.first() : this.search_results.find(“.active-result”).first();
if (do_high != null) {
return this.result_do_highlight(do_high);
}
*/
};

3.Chosen.prototype.keydown_arrow = function内へキーコードの下を入力時にハイライトが無い場合に最初の要素をハイライト処理追記

Chosen.prototype.no_results_clear = function() {
return this.search_results.find(“.no-results”).remove();
};

Chosen.prototype.keydown_arrow = function() {
var next_sib;
if (this.results_showing && this.result_highlight) {
next_sib = this.result_highlight.nextAll(“li.active-result”).first();
if (next_sib) {
return this.result_do_highlight(next_sib);
}
} else {
var do_high, selected_results;
selected_results = !this.is_multiple ? this.search_results.find(“.active-result”) : [];
do_high = selected_results.length ? selected_results.first() : this.search_results.find(“.active-result”).first();
return this.result_do_highlight(do_high);
//return this.results_show();
}
};

以上を適用した場合に日本語入力確定後にも選択が可能となります。

今回ご紹介させて頂いたプラグインのように、英語での使用のみかと思っても日本語利用出来る術がありますので、
日本語サイトでの利用のしやすさもぐっと上がると思われます。

参考サイト:http://blog.shuffleee.com/3145/

タグ

サイト内検索

Copyright(c) 2017 IT-TERA All Rights Reserved.