Help us understand the problem. What is going on with this article?

Redmineで長いセレクトボックスを自動補完して欲しかったのでプラグインを作った

More than 3 years have passed since last update.

Redmineでものすごく長いセレクトボックスに遭遇して入力に難儀したことはないでしょうか。僕はあります。

つくったもの

Selectbox Autocompleter

動作例

動作例

デフォルトでは 指定したセレクトボックスをSelect2に変換します。
プラグイン設定で変換するセレクトボックスをidで指定することができます。

設定ページでIDを指定

たとえば、デフォルトで指定している「project_quick_jump_box」は右上のプロジェクトジャンプのセレクトボックスです。関わっているプロジェクトが多いときに設定しておくと特に便利でしょう。

セレクトボックスのidさえ調べておけば、自分で変換したいセレクトボックスだけ指定することができます。

ちなみに、project_quick_jump_box だけ Select2 化するプラグインは既にあります(Improved Searchbox)また、Select2ライブラリを読み込むプラグインなどは既にいくつかあります(+View Customize プラグインなどと組み合わせて使える)。

このプラグインの場合、インストールするだけで設定ページのID指定から簡単にカスタムしやすくなっているのがよいところです。

インストール方法

$ cd $(REDMINE_HOME)/plugin
$ git clone https://github.com/heriet/redmine-selectbox-autocompleter.git selectbox_autocompleter

pluginディレクトリにcloneしてRedmine再起動するだけ(cloneするディレクトリ名は上の通り selectbox_autocompleter にする)

経緯とか

ものすごく長いセレクトボックスを頻繁に選択するのがあまりにつらかったので、まずは指定したセレクトボックスにHTML5のdatalist化するような Greasemonkeyをつくっていました。そして、それを利用者全員が使えるよう、Redmine Pluginにしたのが Selectbox Autocompleter です。

datalistを使ってautocomplete

datalistを使う場合、jqueryに依存しないし軽量というメリットはあります。が、いかんせんテキストボックスを余分に作るので、デザインが崩れたりします。崩れるだけならCSSで調整してもよいのですが、さらにChromeだとものすごく長い datalist に対してスクロールバーを表示してくれない(Firefoxだといい感じにスクロールバーを付けてくれる)という問題があることが後々わかりました。

結局 Select2を使ったほうが使い勝手がよさそうということがわかり、そちらをデフォルトに採用しました(いちおう、datalistを使った場合も機能的には残している)

select2を使ってautocomplete

あと、上に上げたようにSelect2を組み込める類似の機能が実現できるプラグインが他にもたくさんあることに、作ったあとに気がついたのですが、せっかくなので自分なりに導入が簡単かつカスタムしやすいように仕上げました。(セレクトボックスのidをいちいち調べないといけないのはちょっと不便ですが、カスタムの幅の広さを優先した)

まとめ

セレクトボックスの要素数が長すぎて使いにくいRedmineを見つけたときは、ぜひ Selectbox Autocompleter をお試しください

fjct
クラウド・IoT 関連サービスを開発・提供している企業です。(こちらは、富士通クラウドテクノロジーズの有志にて運営しております。)
https://fjct.fujitsu.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした