自動文字参照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サンプルページ一覧

skuare.net