複数選択を行える便利なjQueryのリストプラグイン ～ multiselect

複数の項目を選択できる便利なjQueryのプラグインを以前使ったので、ASP.NET MVC上でどのように実装するかを解説する。実際に動作しているものは下図の通り。

公式サイトはこちらなのだが、今回は機能がより豊富なYanick Rochon氏作成のこちら（リンク死亡確認 by 王大人：2011/4/23。対応リンクは下記参照のこと）のバージョンを使用する。Referenceも前述のサイトにあるので必要に応じて参照して欲しい。

更新：2011/4/23
こちらのGitからAjax検索対応のMultiselect pluginが取得できる。対応の説明サイトはこちら。
Ajax未対応のMultiselect pluginはこちらから取得できる。
新しく解説したのが下記。
複数選択を行える便利なjQueryのリストプラグイン　その２
更新ここまで

あわせて下記のライブラリも必要なのでそれぞれ取得して欲しい。
jquery-ui
jquery.tmpl
jquery.blockUI

aspxの実装は下記の通り（省略してあります）。

<link href="../../Content/Multiselect/ui.multiselect.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/Multiselect/jquery-ui-1.7.1.custom.min.js" type="text/javascript"></script>
<script src="../../Scripts/Multiselect/jquery.blockUI.js" type="text/javascript"></script>
<script src="../../Scripts/Multiselect/jquery.tmpl.1.1.1.js" type="text/javascript"></script>
<script src="../../Scripts/Multiselect/ui.multiselect.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
    $("#clubs").multiselect({ remoteUrl: '/Admin/GetClubs/' });
});
</script>

<select id="clubs" class="multiselectForClubs" multiple="multiple" name="clubs">
</select>

画像を参照してもらえば分かると思うが、プラグイン右上に検索用のテキストボックスがある。今回は何か入力された際にサーバサイドで検索を行いたいのでmultiselectのオプションにremoteUrlを設定している。remoteUrlを指定しない場合はクライアント上でのフィルタリングが有効になる。サーバサイドで呼び出されるのはremoteUrlで指定したAdminControllerのGetClubsメソッドだ。

AdminControllerの実装は下記の通り。

public ContentResult GetClubs(string q){
 var clubs = _service.Clubs.Where( Logic is here ).ToArray();
 var results = clubs.Length > 0 ? string.Join("\n", clubs) : string.Empty;
 return Content(results);
}

検索テキストボックスに入力された内容は引数qとして取得できる。初期状態でのremoteUrlの戻り値はValue=Textで一行ごとにひとつのoption要素を想定しているので、それに当てはまるように整形している。独自のデータ構成で返却したい場合はdataParserオプションを使用すれば可能だ。今回は文字列をそのまま返却するためにContentResultを使用している。