CSSで多少修飾を行ったサンプルです。

【→sample.htm】

　手順は最小構成サンプルとほとんど変りませんが、プログレスバーオブジェクトを少し利用しました。プログレスバーのメンバーなどは、jslb_ajasql027.jsのソース内に書かれています。

　Ajax、AjaSQLと郵便番号･住所検索用の3つのライブラリを読み込んで使います。このサンプルで設定している主な項目は、以下の通りです。

• プログレスバーに使うHTML ( サンプルでは、sqlite.progress.prog_bar = '|' )
• プログレスバーの色 ( サンプルでは、sqlite.progress.div.style.color = 'orange' )
• プログレスバー用DIV ( サンプルでは、<div id="progressBarId"></div> )
• 住所候補選択用DIVのCSS指定 ( サンプルでは、#selzipdiv{ ... }等 )
• 住所候補選択用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_zip2addr.js -->
<script language = "JavaScript" 
        charset = "utf-8"
        src     = "../ajasql/ajasql_zip2addr001.js"></script>

<script language = "JavaScript">
<!--

	//初期設定
	window.onload=function(){

		//初期化 
		sqlite = new asql_Conf(sqlite01);

		//プログレスバー(デフォルトは'o')
		sqlite.progress.prog_bar = '|'
		sqlite.progress.div.style.color = 'orange'

		//住所候補選択用DIV
		selzip   = document.getElementById('selzipdiv')
		//〒番号用 入力フィールド
		zipfild  = document.zipform.zip
		//住所用 入力フィールド
		addrfild = document.zipform.address
	}

//-->
</script>


<!-- 住所候補選択用DIVのCSS指定 -->
<style>
<!--
#selzipdiv{
	background-color : #ffffff          ;
	font-size        : 12px             ;
	width            : 300px            ;
	padding          : 2px              ;
}
#selzipdiv a:link     { color: #333; background: none;}
#selzipdiv a:visited  { color: #666; background: none;}
#selzipdiv a:active   { color: #000099; background: none;}
#selzipdiv a:hover    { color: orange; }

-->
</style>

<br>
<b>【入力補助】〒番号(前方一致)・住所(部分一致)によるあいまい検索 </b><br>
〒番号を入力、または、住所の一部を入力して改行みて下さい(「牛久」など)、
〒番号と住所が検索されます

<form name="zipform" onsubmit="return false">
	〒<input type       = "text"
	       name         = "zip"
	       size         = "10"
	       maxlength    = "8"
	       autocomplete = "off"
	       onkeyup      = "zip2addr(this.value)"
	       style        = "background-color:#ffcc33;
	                       ime-mode:disabled;"
	       value        = "">
	住所<input type         = "text"
	       name         = "address"
	       size         = "60"
	       autocomplete = "off"
	       onkeydown    = "addr2zipaddr(event,this.value);" 
	       style        = "background-color:#ffcc33"
	       value        = "">
	<div id="selzipdiv"></div>
</form>

<!-- ここへプログレスバーを出力 -->
<div id="progressBarId"></div>

ファイル構成

【HTML/JavaScript/PHP】

(Webアクセス可エリア)
　　　　│
　　　　├3/
　　　　││
　　　　│└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|茨城県牛久市島田町
　　:
　　:

必要な環境