[ JQuery ] [ Ajaxでテスト01 ] [ Ajaxでテスト02 ]

Ajaxでテスト05

  • 2013-11-25,2013-12-03 〜

Ajaxでテスト03の郵便番号入力部分にmaskedinputを使って数字7桁の入力に制限してみます。
これを変える事で、他の部分で調整した方がよい箇所が出ます。
まず、以下の様にしてライブラリを読み込む必要があります。

<script src="./jquery/js/jquery.maskedinput.js"></script>

※ jquery.jsを利用する設定がスクリプトのサンプルに記載されていませんが、省略してあり、実際は必要です。



サンプル

郵便番号のCSVデータは、郵便局のホームページからダウンロードした全国の郵便番号データを利用しています。

データを検索するPHPコード 

<?php
 
$code = $_GET['code'];
$code =preg_replace('/\W/','', $code);
 
 
// データには半角数字が7個連続するのは現在の郵便番号のみなので
// そのままgrepで検索する事でデータを探せる
$cmd = "grep {$code} ken_all.csv";
 
$r = exec($cmd);
 
// 元のデータはシフトJISなので取りあえずUTF-8に変換
// データのサンプル
//   0     1         2        3            4            5        6          7            8
// 01101,"064  ","0640941","ﾎﾂｶｲﾄﾞｳ","ｻﾂﾎﾟﾛｼﾁﾕｳｵｳｸ","ｱｻﾋｶﾞｵｶ","北海道","札幌市中央区","旭ケ丘",0,0,1,0,0,0
 
$r = mb_convert_encoding($r, "UTF-8", "SJIS");
 
$r = str_replace("\"", "", $r);
$r = str_replace(" ", "", $r);
$r = str_replace(",", "\t", $r);
 
 
print $r;
?>


実行結果


コードの部分に郵便番号7桁を半角数字で入力します。該当するものがあれば漢字の住所とカナのよみを表示します。

使い道はあまりないと思いますが、テキストデータ12万行程をgrepで検索しているわけです。

エラーの処理が無いのでシンプルなスクリプトです。


この部分のソース 

<script>
  $(function() {
    html_meisai();
 
    《変更箇所１》  // 2013-12-03
    $("*[id^=id1-]").keyup(function() {
      // alert(this.id);
      id12 = this.id.split('-');
      code = $("#"+this.id).val();
      《変更箇所２》 // 2013-12-03
      if (code.length==7 || code.length==0 ) {
        if (code != '') {
          kekka = search_code(code);
          // alert("Row:"+id12[0]+" / Code:"+code+" / Result:"+kekka);
          fld = kekka.split("\t");
          $("#id2-"+id12[1]).val(fld[6]+fld[7]+fld[8]);
          $("#id3-"+id12[1]).val(fld[3]+fld[4]+fld[5]);
        } else {
          $("#id2-"+id12[1]).val("");
          $("#id3-"+id12[1]).val("");
        }
      }
    });
  });
 
 
 
 
  // ---------------------------------------------
  function html_meisai() {
    html = "<table>\n";
    html += "<tr>";
    html += "<th>行</th>";
    html += "<th>コード</th>";
    html += "<th>住所</th>";
    html += "<th>よみ</th>";
    html += "</tr>";
    for (i=0; i<10; i++) {
      html += "<tr>";
 
      html += "<td class='r0'>"+(i+1)+"</td>";  // 行
      html += inp_text("id1-"+i,"7","r1");      // コード
      html += inp_text("id2-"+i,"30","r2");     // 住所
      html += inp_text("id3-"+i,"30","r3");     // よみ
      html += "</tr>\n";
    }
    html += "</table>\n";
 
   $("#meisai").html(html);
  }
 
  // ---------------------------------------------
  function inp_text(id, size, classN) {
     t = '<td class="'+classN+'"><input type="text" id="'+id
            +'" size="'+size+'" class="'+classN+'"></td>';
 
     return t;
  }
 
  // ---------------------------------------------
  function search_code(code) {
    var csv = $.ajax({
      url: "sample_data/testcsv005.php?code="+code,
      async: false
    }).responseText;
 
    return csv;
  }
 
 
</script>
 
  <div id="meisai"></div>



さて、本題に少し入ります。

結果をダイアログに表示します。
→ Ajaxでテスト04