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

フォームの入力補助javascript「Autosuggest / Autocomplete with Ajax」

｜ ｜ ｜ ｜ ｜ ｜ ｜

フォームなどで何かを入力するとそれにあった言葉を提示してくれるのをオートサジェストなどと呼びます。
訪問者の入力を楽にするほか、忘れていたものを思い出させることもできます。
Autosuggest / Autocomplete with Ajaxはこれを実現するjavascriptです。

使用方法
Autosuggest / Autocomplete with Ajaxからbsn.AutoSuggest_2.1.3_comp.jsやautosuggest_inquisitor.cssなどをダウロードします。
<script type="text/javascript" src="http://yourdomain/bsn.AutoSuggest_2.1.3_comp.js"></script>
<link rel="stylesheet" href="http://yourdomain/autosuggest_inquisitor.css" type="text/css" media="screen">
<script type="text/javascript">
var options = {
script:"http://yourdomain/test.php?json=true&limit=10&", //数字は表示件数
varname:"input",
json:true,
shownoresults:false,
};
var as_json = new bsn.AutoSuggest('id名', options);
</script>
以上を書き込んだらオートサジェスト用のフォームを下記のように記述します。
<form method="get">
<input type="text" id="id名">
</form>
フォームの入力補助javascript「Autosuggest / Autocomplete with Ajax」サンプル

記事作成：2008年02月02日

前の記事：リンク先のスクリーンショットを表示するjavascript「websnapr」
次の記事：div要素もリンクにするjavascript「jquery.biggerlink」