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

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

sponsors

「フォームの入力補助を行うJavaScript「AutoSuggest jQuery Plugin」」をシェアする

記事作成:
記事URL:

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