住所入力(インクリメンタル・サーチ)
前掲の住所入力プログラムにインクリメンタル・サーチ機能を追加します。
(手順)
(1)onKeyUpイベントを検知するたびに入力文字数を検査する。
(2)所定の文字数以上になったらPHPスクリプトに通信して、該当の住所のリストを得る。
(3)PHPスクリプトでは、データベースより該当住所を部分検索する。
検索結果はOPTION句のリストに整形して返す。
(4)検索結果はメニューリストとして表示する。
<![CDATA[
function tryAjax(){
// 入力文字数が4以上になったら検索開始
if ($F("postcode").length >= 4 ){
uri = "zip.php";
data = Form.serialize("form01");
options = {method: "post",
parameters: data,
onComplete:ajaxRequest};
new Ajax.Request(uri, options);
}
}
function ajaxRequest(myRequest){
// メニューリストとして返す
$("addr_list").innerHTML = "<select id='select01' size='10'>" + myRequest.responseText + "</select>";
}
// メニューリストを選択した時の処理
function dispForm(){
var index = $("select01").selectedIndex;
var options = $("select01").getElementsByTagName("option");
// 郵便番号の表示
$("postcode").value = options[index].value;
// 住所の表示（オプション・テキストより郵便番号部分を除く）
addr = options[index].text.substring(9, options[index].text.length);
$("addr").value = addr;
}
]]>
<![CDATA[
郵便番号を入力してください。例：112-0001〜15,113-0001〜113-0034<br>
ハイフンが入力された時点で、住所の候補が表示されます。<br>
<span id="msg"><font color="blue"> [検索中・・・・・]</font></span>
<br>
<form id="form01">
郵便番号<input type="text" name="postcode" id="postcode" size="10" onKeyUp="tryAjax();return false;"><br>
住所<input type="text" name="addr" id="addr" size="40" /><br>
<input type="button" value="選択" name="button01" id="button01" onclick="dispForm()"/>
<br>
<div id="addr_list"> </div><br>
</form>
]]>
PHPファイル
<![CDATA[
＜?php
define("HOST","localhost");
define("DBNAME","testDB");
define("USER","user");
define("PASS","pass");
// 内部コードをUTF8にする
mb_internal_encoding("UTF-8");
$BOM = "\xef\xbb\xbf";
$hcode = $_POST["postcode"];
$acode = split("-", $hcode);
$code = "'".$acode[0].$acode[1]."%"."'";
$conn = mysql_connect(HOST, USER, PASS) or die("接続エラー");
mysql_select_db(DBNAME, $conn);
// 郵便番号はDB内ではひとつづきになっているので、表示用に"-"を挿入した形で抽出する
$res = mysql_query("SELECT
CONCAT(SUBSTRING(code,1,3),'-',SUBSTRING(code,4,4)) AS code, adr
FROM zip WHERE code like $code", $conn);
echo $BOM;
$cols = array();
while ($row = mysql_fetch_array($res, MYSQL_ASSOC)) {
// DBの値をUTF8に変換する
$adr = mb_convert_encoding($row['adr'], 'UTF-8', 'EUC-JP');
// メニューリストの形式に書式化して返す
echo "<option value='".$row["code"]."'>".$row["code"]." ".$adr."</option>";
}
mysql_close($conn);
?>
]]>
