キーワードを入力するだけで自動で該当する候補をキーボードで操作可能なテーブル内に表示するjQueryプラグイン・jQuery ComboGrid

オートコンプリート機能でキーボードで操作できる
コンボボックスを出してくれる、という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>

もろもろ読み込んでオプションやテーブル内に呼び出すデータのパス、セレクタなどを設定。