オートコンプリート機能でキーボードで操作できる
コンボボックスを出してくれる、というjQueryの
プラグイン・jQuery ComboGridのご紹介です。
なかなか高機能なプラグインですね・・・文字を
入力するだけで自動で候補をテーブルとして
出してくれます。ページの切り替えはキーボード
で操作可能です。
使う頻度は少なそうですが、とても見やすく、ユーザーの操作も少なくて済み、直感で操作が分かるようなUIでもあるので覚えておくとどこかで役に立つかもしれません。IE6や7でも動いてくれますが、IE6はcssで調整が必要です。
jQuery ComboGrid
こんな感じで入力フィールドにaと入力しただけで候補がコンボボックス内に表示されました。このボックスはajaxで呼び出しており、キーボードで次のページに移動したり、その場で表示する候補の数を増やす、要素のソートなども出来ます。
jQueryUIを使っているのでこのように別のデザインにも出来ます。
IE7も問題ないです。
オプションもオートフォーカスやデバッグ、コンボボックスをドラッグ可能にしたり、サイズ、時間を指定して表示など色々と設定できるみたいです。
<link rel="stylesheet" type="text/css" media="screen" href="jquery-ui-1.8.9.custom.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="jquery.ui.combogrid.css"/>
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.9.custom.min.js"></script>
<script type="text/javascript" src="jquery.ui.combogrid.js"></script>
<script>
jQuery(document).ready(function(){
$( "#project" ).combogrid({
debug:true,
colModel: [{'columnName':'id','width':'10','label':'id'}, {'columnName':'name','width':'45','label':'title'},{'columnName':'author','width':'45','label':'author'}],
url: '/server.php',
select: function( event, ui ) {
$( "#project" ).val( ui.item.name );
return false;
}
});
});
</script>もろもろ読み込んでオプションやテーブル内に呼び出すデータのパス、セレクタなどを設定。
<input size="30" id="project"/>
あとはマークアップすればOKです。
一応ローカライズしやすいようにしてくれているようです。ライセンスはGPLとMITのデュアルライセンスとのこと。以下よりデモの確認とスクリプトのダウンロードができます。