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

自動文字参照javascript「jQuery Autocomplete」

｜ ｜ ｜ ｜ ｜ ｜ ｜

フォームで文字を入力すると自動で該当する文字を示してくれるオートコンプリートがあります。
これを利用すると入力間違いが減少するなど訪問者・開設者の双方に役立ちます。
今回は、jQueryベースのjQuery Autocompleteを取り上げます。

使用方法
jQuery Autocompleteからjquery.autocomplete.js、jquery.autocomplete.cssを、jQueryからjquery.jsをダウンロードします。
<link rel="stylesheet" media="screen" href="http://yourdomain/jquery.autocomplete.css" type="text/css">
<script src="http://yourdomain/jquery.js" type="text/javascript"></script>
<script src="http://yourdomain/jquery.autocomplete.js" type="text/javascript"></script>

上記のようにheadに書き込んだら、HTMLで以下を記述します。
<input type="text" id="id名" value="">
<script type="text/javascript">
function findValue(li) {
if( li == null ) return alert("該当する項目はありません");
if( !!li.extra ) var sValue = li.extra[0];
}
function selectItem(li) {
findValue(li);
}
function formatItem(row) {
return row[0] + " (id: " + row[1] + ")";
}
function lookupLocal(){
var oSuggest = $("#id名")[0].autocompleter;
oSuggest.findValue();
return false;
}
$(document).ready(function() {
$("#id名").autocompleteArray(
[
"項目1", "項目2", "項目3"
],
{
delay:10,
minChars:1,
matchSubset:1,
onItemSelect:selectItem,
onFindValue:findValue,
autoFill:true,
maxItemsToShow:10
}
);
});
</script>
＊日本語は無理のようです。
自動文字参照javascript「jQuery Autocomplete」サンプル

記事作成：2007年09月04日

前の記事：iPhotoライクな画像ギャラリーを作成するjavascript「iPhoto-like image resizing」
次の記事：フォームをリアルタイムでチェックするjavascript「FormCheck」