5月に、私たちは改善された詳細な時間レポートをリリースしました。これには、レポートに含まれるデータをフィルタリングするためのインターフェースが改善されています。フィルターは通常のHTMLセレクトボックスに比べて大きな改善であるため、そのコードを世界と共有することにしました。今日は、これをChosenというプラグインとしてリリースします（jQuery および Prototype用）。

HTMLフォームを作成する際、セレクトボックスは長いオプションリストを表示するのに便利ですが、スペースを取らないためよく使われます。しかし、選択肢が数個を超えると、ユーザーがナビゲートするのが難しくなります。フィールドに入力することは期待通りに機能しないことが多く（多くのユーザーはこのオプションを知らない）、数十または数百の選択肢をスクロールするのは遅くて面倒です。特に選択肢の順序がすぐにわからない場合、これらの問題は顕著になります。

Chosenのセレクトボックス

Chosenは、検索ベースのフィルタリングを追加することでセレクトボックスを改善することを目指しています。ユーザーがChosen要素をクリックすると、カーソルが検索フィールドに置かれます。ユーザーが入力すると、検索条件に合わないオプションは非表示になり、有用な結果だけが残ります。ユーザーは標準のセレクト要素と同じように選択肢を選ぶことができ、マウスでハイライトしてクリックするか、キーボードを使って選択肢をナビゲートできます（上下矢印でハイライトを変更し、Enterで選択します）。

さらに、複数のセレクト要素には、選択されたオプションを表示するための改善されたインターフェースが提供されます。ユーザーが選択したオプションは、要素の上部にボックスとして表示され、常に見える状態になります。これらはワンクリックまたはバックスペースで削除できます。

Chosenの使い方

開発者にとって、Chosenの使用は非常に簡単です。Chosenは標準のHTMLセレクト要素を段階的に強化することで機能するため、渡されたデータを処理するためにバックエンドの変更は必要ありません。Chosenフィールドを介して選択されたオプションは（現在は非表示の）HTMLフィールドを変更し、データは通常の方法でフォーム送信時に渡されます。

Chosenは CoffeeScript で書かれており、JavaScriptを書くためのはるかに読みやすい構文を提供します。CoffeeScriptはフレームワークに依存しないオブジェクト指向JavaScriptの維持を容易にするため、jQueryとPrototypeの両方のプラグインのベースとして同じコードの多くを使用することができました。Chosenのソースを取得すると、CoffeeScriptバージョンも手に入ります。

試してみたいですか？ GitHubでソースを取得してください。

オープンソース、最高！

Harvestは日々オープンソースソフトウェアコミュニティの貢献に依存しており、私たちもその恩恵を返すことに興奮しています。私たちはいくつかのオープンソースプロジェクトを維持しており、そのコレクションを今後も増やしていく予定です。Chosenや私たちのプロジェクトにクローン、フォーク、貢献することをお勧めします。

素晴らしい開発チームと共に働き、世界と仕事を共有することがあなたの好みなら、ぜひ私たちに参加してください。素晴らしい開発者を数名募集しています。