[ JQuery ] [ 入力補完01 ] [ 入力補完02 ] [ 入力補完03 ] [ 入力補完04 ]
- 2013-12-23 編集
入力補完03
テスト
説明
サンプルの内容は、仕組みだけを理解する為のものです。意味のある内容になっていません。
ソース
#html{{
<link rel="stylesheet" href="./jquery/css/redmond/jquery-ui-1.10.3.custom.css">
<script src="./jquery/js/jquery-1.9.1.js"></script>
<script src="./jquery/js/jquery-ui-1.10.3.custom.js"></script>
<style>
ul.ui-autocomplete li a {
text-align:left;
color:red;
}
.ui-autocomplete {
max-height: 200px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
height: 200px;
}
</style>
<script>
$(function(){
$( "#ac1" ).autocomplete({
source:function(req, resp){
var d = ["1111","2222","3333","4444","5555"];
d.push("666666");
d.push("777777");
for (i=0;i<30;i++){
d.push(req.term+":"+i);
}
resp(d);
}
});
});
</script>
<input type="text" id="ac1" size="20">
}}なお、サンプルにあったように、
表示する候補の窓の高さを限定しています。
.ui-autocomplete {
max-height: 200px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
height: 200px;
}少し戻って、sourceに文字列(URLやパス)を指定した時に、指定したものがPHPのプログラムで処理した結果を返す方法をもう少しちゃんと動くようにしてみます。
取りあえず出来る事は、郵便番号データがありますので、それを利用してサンプルを動かしてみます。