自動文字参照javascript「jQuery Autocomplete」 : skuare.net

自動文字参照javascript「jQuery Autocomplete」

2007

09/04

フォームで文字を入力すると自動で該当する文字を示してくれるオートコンプリートがあります。
これを利用すると入力間違いが減少するなど訪問者・開設者の双方に役立ちます。
今回は、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」サンプル