Jquery　を使った住所情報の自動入力

締切済

質問者：noname#152215
質問日時：2011/04/19 15:26
回答数：2件

PHPにて会員情報入力フォームを作っています。

住所情報は、Jqueryを使い、入力された郵便番号から自動的に補完させようとしています。

・http://tabtab.egoism.jp/blog/2011/02/21/jquery-z …
・http://blog.eggrice.com/?p=25
＝＞jquery.zip2addr.js を使用する例はいくつか見つけました。

DBには、日本郵便のサイトから取得した KEN_ALL.CSV　を登録済です。
DBから取得して、自動補完を実現する方法が分かりません。

Jqeryはど素人なので、参考になるようなサイト（DBから取得する）、もしくは方法をご存知の方がおりましたら、どなたかご教示頂けないでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： narative_h
回答日時：2011/04/20 11:58

実際に作成していないので断言できませんがAjaxで作成できそうです。

仕組みとしておおまかに書くと、

１　フォームに郵便番号の値を入力
２　jqueryを利用してデータベースと連帯するPHPにその値を送る（ここで住所などをゲット）
３　２で取得した住所を1のフォーム画面へ画面遷移せずに送る

ここでは簡単にフォームで入力した値をPHP側でちょっとした処理を行い返す動作を紹介します。
まずはフォーム側

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQueryのテスト</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4. …

<script type='text/javascript'>

$(document).ready(function(){
$("#submit_bt").click(function(e){

e.preventDefault();

ajax_php();
});
});

function ajax_php(){
var word_val=$("#word_id").val();

$.post("./test.php", {word : word_val}, function(data){
$("#php_word").html(data);
})
}

</script>

<head>
<body>

<form id ="watasu" method="post">
<input type="text" name="word" id="word_id" />
<input type="submit" value="渡す" id="submit_bt" />
</form>

<div id="php_word"></div>

</body>
</html>

次にPHP側（上記のHTMLファイルと同じ階層に配置してます）ファイル名 test.php

<?php

$word = $_POST['word'];
$a = $word."を入力しました";

echo <<<EOM
<h1>$a</h1>　
EOM;

?>

PHPファイルを見てもらえばわかるように、フォームに「あ」と入力して渡すボタンを押すと
「あを入力しました」という文字列が画面遷移せずに表示されると思います。
これと同じ原理でPHP側でデータベース処理して結果を表示させればいいと思います。

ajax php　連帯　などとぐぐったり、
参照URLのAjax編を見ていくつか動作を試してみれば感覚がつかめると思います。

参考URL：http://www.atmarkit.co.jp/fdotnet/jqueryref/inde …