skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

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

｜ ｜ ｜ ｜ ｜ ｜ ｜

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

使用方法
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「AutoSuggest jQuery Plugin」

記事作成：2010年01月28日

前の記事：要素を切り替えるJavaScript「jShowOff: a jQuery Content Rotator」
次の記事：画像を拡大表示させるJavaScript「jQuery zoom plugin」