フォームの入力補助を行うJavaScript「AutoSuggest jQuery Plugin」

Googleなどの検索では1文字いれると候補が出てきます。
ユーザビリティ向上のため、このようにフォームにも入力補助があると好ましくなります。
JavaScriptのAutoSuggest jQuery Pluginを利用することで簡単に導入できます。

sponsors

使用方法

AutoSuggest jQuery Pluginからjquery.autoSuggest.jsをダウンロードします。

<link rel="stylesheet" href="autoSuggest.css" type="text/css">
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.autoSuggest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	var data = {items: [
	    {value: "1", name: "候補1"},
	    {value: "2", name: "候補2"},
	    {value: "3", name: "候補3"}
	]};
	$("input[type=text]").autoSuggest(data.items, {selectedItem: "name", searchObj: "name"});
});
</script>
dataは複数個書くことが可能です。
あとは、inputを記述すれば完成です。

サンプル


Javascriptサンプルページ一覧
skuare.net