[0002]入力をリアルタイムに取得するInputイベント
Inputイベント
入力をリアルタイムに取得し、Ajaxでデータベースより取得した候補を表示するため、今までkeyupイベントを利用していたが、
スマホで日本語に変換した後にイベントが発生しない!ということで、これからはInputイベントを利用しようと思います。
Inputイベントに変更したことにより、valueはci_area_change関数に渡すため、追加しました。
//keyupイベントの場合
var keyUpTime = 100;
var keyUpTimeout = null;
$("#des_jp").keyup(function(){
clearTimeout(keyUpTimeout);
keyUpTimeout = setTimeout(function() { ci_area_change("des_jp",1); }, keyUpTime);
});
//Inputイベントの場合
$(function() {
var keyUpTime = 100;
var keyUpTimeout = null;
var $des_jp = $('#des_jp');
$des_jp.on('input', function(event) {
clearTimeout(keyUpTimeout);
keyUpTimeout = setTimeout(function() {
var value = $des_jp.val();
ci_area_change("des_jp",1,value); }, keyUpTime);
});
});
//目的地やホテルリスト変更(海外・国内)
function ci_area_change(id,flg,inputv){
//inputv = $('#'+id).val();
//alert(inputv);
$("#"+id+"_list").html("");
$.ajax({
type: "GET",
url: "/ajax/input_des_rtn",
data: {
inputd:inputv,
flg:flg
},
success: function(j_data){
var dls = JSON.parse( j_data );
//初期化
setid = "#"+id+"_list";
$(setid).html("");
$("#"+id+"_notfound").html('');
if(dls != ""){
for(var k in dls){
if(flg == 3){
$(setid).append(''+dls[k]+' ');
}else if(flg == 2){
$(setid).append(''+dls[k]+' ');
}else{
sp = k.split("_");
if(sp[1] == ""){
$(setid).append(''+dls[k]+' ');
}else{
$(setid).append(''+dls[k]+' ');
}
}
}
}else{
if(flg == 3){
meg = "該当のホテル名の取り扱いがございません。";
}else{
meg = "該当の目的地の取り扱いがございません。";
}
$("#"+id+"_notfound").html(''+meg+'
');
}
}
});
}
無事、スマホで日本語変換後イベントが発生しました!