オートコンプリート JQuery

JQueryでオートコンプリートやりたいと思い、調べました。
jquery.autocomplete.js
といういいものがありました。
これを使えば簡単にオートコンプリートが実装できます。

サンプルとして

<script type='text/javascript' src='js/jquery.autocomplete.js'></script> <script type="text/javascript"> $(document).ready(function(){ 　// イニシャル時にセットアップ 　setAutoCompliete("test"); }); // セットされたときに呼び出されます。 function findValue(li) { if( li == null ) return alert("No match!"); // if coming from an AJAX call, let's use the CityId as the value if( !!li.extra ) var sValue = li.extra[0]; // otherwise, let's just display the value in the text box else var sValue = li.selectValue; alert("The value you selected was: " + sValue); } function selectItem(li) { findValue(li); } // オートコンプリートで表示をどのようにするか？ function formatItem(row) { return row[0] + " (name: " + row[1] + ")"; } // 初期設定 function setAutoCompliete(key){ // PHPを呼び出し var url_text = "/test.php"; $('#' + key).autocomplete(url_text, { onItemSelect : selectItem, onFindValue : findValue, formatItem : formatItem, autoFill:true, cacheLength:10, delay:10, matchSubset:1, matchContains:1, width:300 }); } </script> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~省略 <input type="text" name="test" id="test" value="" />

PHP側の出力

1234|test 5678|test2 9012|test3

のような感じでやります。

これは簡単で便利です