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
|
のような感じでやります。
これは簡単で便利です