CSSなどによる修飾を行っていませんので見栄えはあまりよくありませんが、最も簡単な構成です。
【
→sample.htm】
Ajax、AjaSQLと郵便番号・住所検索用の3つのライブラリを読み込んで使います。設定する項目は、以下の通りです。
- 住所候補選択用DIV ( サンプルでは、document.getElementById('selzipdiv') )
- 〒番号用 入力フィールド ( サンプルでは、document.zipform.zip )
- 住所用 入力フィールド ( サンプルでは、document.zipform.address )
<!--
【AjaSQLサンプル】
郵便番号・住所 あいまい検索
document :
-->
<!-- 暫定Ajaxライブラリ jslb_ajaxxxx.js -->
<script language = "JavaScript"
charset = "utf-8"
src = "../ajasql/jslb_ajax036.js"></script>
<!-- 暫定AjaSQLライブラリ ajasqlxxx.js -->
<script language = "JavaScript"
charset = "utf-8"
src = "../ajasql/jslb_ajasql027.js"></script>
<!-- 郵便番号/住所検索 ライブラリ ajasql_zip2addrxxx.js -->
<script language = "JavaScript"
charset = "utf-8"
src = "../ajasql/ajasql_zip2addr001.js"></script>
<script language = "JavaScript">
<!--
//初期設定
window.onload=function(){
//初期化
sqlite = new asql_Conf(sqlite01);
//住所候補選択用DIV --DIVのID名を指定します
selzip = document.getElementById('selzipdiv')
//〒番号用 入力フィールド --フォームのname属性を指定します
zipfild = document.zipform.zip
//住所用 入力フィールド --フォームのname属性を指定します
addrfild = document.zipform.address
}
//-->
</script>
<b>【入力補助】〒番号(前方一致)・住所(部分一致)によるあいまい検索 </b><br>
〒番号を入力、または、住所の一部を入力して改行みて下さい(「牛久」など)、
〒番号と住所が検索されます
<form name="zipform" onsubmit="return false">
〒<input type = "text"
name = "zip"
size = "10"
maxlength = "8"
autocomplete = "off"
onkeyup = "zip2addr(this.value)">
住所<input type = "text"
name = "address"
size = "60"
autocomplete = "off"
onkeydown = "addr2zipaddr(event,this.value);">
<div id="selzipdiv"></div>
</form>
ファイル構成
【HTML/JavaScript/PHP】
(Webアクセス可エリア)
│
├0/
││
│└sample.htm //サンプル(0604)
│
└ajasql/
│
├ajasql_gw233.php //AjaSQLゲートウエイ(0604)
│
├zipdb //郵便番号SQLiteデータベースファイル(0604)
│
├jslb_ajax036.js //暫定Ajaxライブラリ(0604)
├jslb_ajasql027.js //暫定AjaSQLライブラリ(0604)
└ajasql_zip2addr001.js //郵便番号/住所検索 ライブラリ(0604)
*(0604)等はパーミッションですが、必要に応じて設定してください。
データサンプル
3001282|茨城県牛久市井ノ岡町
3001283|茨城県牛久市奥原町
3001286|茨城県牛久市小坂町
3001281|茨城県牛久市桂町
3001288|茨城県牛久市久野町
3001284|茨城県牛久市島田町
:
:
必要な環境
クライアント側
動作ブラウザ
| win |
mac |
linux |
| n7 | m1 | e6 | o7 | o8 |
n7 | m1 | e5 | s1 |
n7 | m1 | k3 |
| ○ | ○ | ○ | × | ○ |
○ | ○ | × | ○ |
○ | ○ | ○ |
* fireFoxは「m1」に含む
サーバー側