[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+'

    '); } } }); }

    無事、スマホで日本語変換後イベントが発生しました!