全国版住所検索システム(ほぼ完成?)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="ja">

<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
  <meta http-equiv="Content-Script-Type" content="text/javascript">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>全国住所検索システム</title>
  
  <style type="text/css">
 
    body {
      background      : #fff url(./japan.gif) repeat-y top left;
      margin          : 0;
    }

    #header {
      color           : #448;
      font            : normal 14px/100% 'Arial';
      background      : #eee url(./bar.gif);
      height          : 28px;
      padding         : 4px 0 0 8px;
      border-bottom   : 2px #999 solid;
      white-space     : nowrap;
    }

    #list table {
      border          : 3px #aaa double;
      border-collapse : collapse;
      border-spacing  : 0;
      width           : 100%;
    }

    #list td,
    #list th {
      border-top      : none;
      border-left     : none;
      border-right    : 1px #ccc dotted;
      border-bottom   : 1px #ccc solid;
      color           : #333;
      padding         : .5ex 1ex 0 1ex;
      white-space     : nowrap;
    }

    #list th {
      background-color: #464;
      color           : #ff8;
      font-weight     : normal;
    }

    #key {
      ime-mode        : disabled;
      margin          : 0;
    }

    .TargetColor {
      background-color: #ccf !important;
    }

    .focus {
      background-color: #ffd;
      color           : #800;
      font-weight     : bold;
    }
    .blur {
      background-color: #f8f8f8;
      color           : #333;
}  
  </style>

</head>

<body>
  <div id="header">
    住所検索(全国版):
    <input type="text" size="50" id="key" title="郵便番号や地名の一部を空白で区切って入力します" class="blur"> /
    表示
    <select id="SearchMax" name="SearchMax" title="一度に表示する行数を指定します">
      <option value="5">  5</option>
      <option value="10"> 10</option>
      <option value="15"> 15</option>
      <option value="20" selected="selected"> 20</option>
      <option value="30"> 30</option>
      <option value="50"> 50</option>
      <option value="100">100</option>
      <option value="500">500</option>
    </select>件
  </div>

  <div id="list">
    <h3>利用可能な機能</h3>
    <dt>郵便番号で検索する</dt>
      <dd>数値(0〜9)とハイフン(-)で入力すると自動で検索されます</dd>
    <h4>電話の市外局番で検索する</h4>
      <p>"TEL"を入力してから、数値キーで検索が行われます</p>
    <h4>住所の名称で検索する</h4>
      <p>半角アルファベット文字で入力すると検索が行われます</p>
    <h4>データをコピーする</h4>
      <p>表示されたデータを、クリックすると自動でクリップボードにコピーされます</p>
  </div>

  <script type="text/javascript">
  //_汎用関数_(Library)__________________________________________________
  //@cc_on

  function getParent ( node, type, val ) {
    return node ? ( val == node[type] ) ? node: arguments.callee( node.parentNode, type, val): null;
  }

  function addEvent( tgt, evt, eventHandler, flag ) {
  	tgt./*@if(1) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/ evt, eventHandler, flag );
  }

  function getLocation ( ) {
    var par = location.search.substring(1).split( '&' );
    var cnt, pac, nv, ret = { };

    for( cnt = 0; pac = par[ cnt++ ]; ) {
      nv = pac.split( '=' );
      ret[ decodeURIComponent( nv[0] ) ] = decodeURIComponent( nv[1] );
    }
    return ret;
  }


  //_Ajax___________
  var sendRequest = (function( create, setEncHeader, uriEncode ) {
    return function (callback, data, method, url, async, sload, user, password) {
      var oj = create( );
      if(! oj) return null;
      if( sload ) url += ((url.indexOf('?') == -1) ? '?': '&') + 't=' + (new Date).getTime();

      var f = 'object' === typeof callback;
      var callback_onload = f ? callback.onload: callback;
      var callback_onbeforsetheader = f ? callback.onbeforsetheader: null;

      /*@if( @_jscript )
        oj.onreadystatechange = function () { if( 4 == oj.readyState ) callback_onload( oj ), oj.abort()}
      @else@*/
        oj.onload = function () { callback_onload(oj); oj.abort() } /*@end@*/;

      data = uriEncode( data, url );
      if( 'GET' == method.toUpperCase() ) url += (url.indexOf('?')==-1 ? '?': data=='' ? '': '&') + data;
      oj.open ( method, url, async, user, password );
      if( callback_onbeforsetheader ) callback_onbeforsetheader( oj );

      setEncHeader( oj );
      oj.send( data );
      return oj;
    };
  })(
      function ( ) {
        try { return new XMLHttpRequest } catch(e1) {
          try { return new ActiveXObject( 'Msxml2.XMLHTTP.6.0' ) } catch(e2) { /*
            try { return new ActiveXObject( 'Msxml2.XMLHTTP.3.0' ) } catch(e3) { */
              return null; } } // }
      },
      
     function ( o ) {
       if( !window.opera || 'function' === typeof o.setRequestHeader )
         o.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8' );
       return o;
     },
      
     function ( data, url ) {
       var d = [ ], i, enc = encodeURIComponent;

       switch( typeof data ) {
         case 'object': for( i in data ) d.push( enc(i) + '=' + enc(data[i]) ); break;
         case 'string':
           if( '' == data ) return '';
           if( data.charAt(0) == '&' ) data = data.substring( 1, data.length );
           var datas = data.split( '&' );
           for( i = 0; i < datas.length; i++ ) {
             var dataq = datas[i].split( '=' );
             d.push( enc( dataq[0] ) + '=' + enc( dataq[1] ) );
           }
         default:
       }
       return d.join( '&' );
     }
  );




  var formElementKeeper = (function ( getCookie, setCookie, setValue ) {
    return function ( day ) {
      var cnt, cnt2, o, es, e, v;

      for( cnt = 1; o = arguments[ cnt++ ]; ) {
        v = getCookie( o );
        setValue( o, v );
        setCookie( o, v, day );
        
        es = document.getElementsByName( o );
        if( 0 == es.length )
          es = [ document.getElementById( o ) ];

        for( cnt2 = 0; e = es[ cnt2++ ]; ) {
          e./*@if(1) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/
            'change', (function( day, set ) {
              return function ( evt ) {
                var e  = evt./*@if(1) srcElement @else@*/ target /*@end@*/;
                var nm = e.name || e.id;
                if( nm ) set( nm, e.value, day);
              };})( day, setCookie ), true );
        }
      }
    };
  })(
      function ( name ) {
        name = encodeURIComponent( name ).replace( /([.*()]) /g, '\\$1' );
        var value = document.cookie.match( RegExp( name + '\\s*=\\s*(.*?)(?:[\\s;,]|$)' ) );
        return value ? decodeURIComponent( value[1] ): '';
      },

      function ( name, value, day, path, domain ) {
        return document.cookie = encodeURIComponent( name ) + '=' + encodeURIComponent( value ) +
          '; ' + 'expires=' + new Date( ( new Date ) - 86400000 * -day ).toUTCString( ) +
          '; ' + ( path ? 'path=' + encodeURI( path ) + '; ': '' ) +
          (domain ? 'domain=' + encodeURI ( domain ) + '; ': '' );
      },

      function ( n, v ) {
        var objs = document.getElementsByName( n );
        var i, j, o, p;
        
        if( 0 === objs.length ) objs = [ document.getElementById( n ) ];
        for (i = 0; p = objs[ i++ ];) {
          switch( p.type ) {
            case 'text' : case 'textarea': case 'button':
            case 'reset' : case 'submit': case 'hidden': p.value = v; break;
            case 'checkbox': p.checked = v; break;
            case 'radio' : p.checked = p.value == v; break;
            case 'select-one': case 'select-multiple':
              for( j = 0; o = p.options[ j++ ]; ) o.selected = o.value == v; break;
          }
        }
      }
    );


  var TokenList = (function ( cut, has, join ) {
    return function ( type ) {
   
      return {
   
        'contains':
          function ( e, name ) {
            if( !has( e[ type ], name ) ) {
              var keys = cut( name );
              var cnt, key;

              for( cnt = 0; key = keys[ cnt++ ];  )
                if( has( e[ type ], key ) ) return false;
            }
            return true;
          },


        'add':
          function ( e, name ) {
            var keys = cut( name );
            var buf = [ ], cnt, key;
            
            for( cnt = 0; key = keys[ cnt++ ];  )
              has( e[ type ], key ) && buf.push( key );

              e[ type ] = ( e[ type ] ? '\u0020': '' ) + join( buf );

            return buf;
          },


        'remove':
          function ( e, name ) {
            var keys = cut( name );
            var buf = [ ], cnt, key;
            
            for( cnt = 0; key = keys[ cnt++ ];  )
              ! has( e[ type ], key ) && buf.push( key );

            e[ type ] = join( buf );

            return buf;
          },


        'toggle':
          function ( e, name ) {
            var keys = cut( name );
            var aBuf = [ ], dBuf = [ ];
            var key, cnt;

            for( cnt = 0; key = keys[ cnt++ ];  ) {
              has( e[ type ], key ) ?
                dBuf.push( key ): aBuf.push( key );
            }

            e[ type ] = join( dBuf );

            if( aBuf.length )
              this.remove( e, join( aBuf ) );

            return e[ type ];
          },


        'length':
          function ( e ) {
            return cut( e[ type ] ).length;
          },


        'item':
          function ( e, num ) {
            var a = cut( e[ type ] ) || [];
            return 'undefined' === typeof num ? a: a[ num ];
          }
      };
    };
  })(
      function (s) { return ('' + s).split( /\u0020+/ ); },
      function (s, n) { return -1 < ( '\u0020' + s +'\u0020' ).indexOf( '\u0020' + n + '\u0020' ); },
      function (a) { return a.join( '\u0020' ); }
    );



  var AutoFocus = (function ( createListener ) {
    return function ( target, css ) {
      var listener = createListener( css );
    
      target./*@if( @_jscript ) attachEvent('on' + @else@*/ addEventListener(/*@end@*/
        /*@if( @_jscript ) 'focusin' @else@*/ 'focus' /*@end@*/, listener, true );
        
      target./*@if( @_jscript ) attachEvent('on' + @else@*/ addEventListener(/*@end@*/
        /*@if( @_jscript ) 'focusout' @else@*/ 'blur' /*@end@*/, listener, true );
    };
  })(
      (function ( classList ) {
        return function ( css ) {
          return function ( evt ) {
            var e  = evt./*@if( @_jscript ) srcElement @else@*/ target /*@end@*/;
            if ( /INPUT|TEXTAREA/.test( e.nodeName ) && ! /checkbox|radio|button/.test( e.type ) ) {
              classList.toggle( e, css );
            }
          };
        };
      })( TokenList( 'className' ) ) 
    );

  (function ( ) {
    var _WAIT_TIME = 350; //mille second


 //   if (! /^http:/.test( location.href ) )
 //     return location.href = 'http://';
 // 適当なURL

    var Page = {
        
      'list': (function ( makeList ) {
          var sql_select = "SELECT ID, ZIP_CODE, ADDRESS1, ADDRESS2, TEL, SAGAWA, PERIKAN, MEITETU FROM myData.japan_zip WHERE ";
          var buf;
          
          return function ( str ) {
            var e = document.getElementById( 'key' );
            var w = (str || e.value).replace( /^\s+|\s+$/g, '' );
            var m = document.getElementsByName( 'SearchMax' )[0].value;
            var p = document.getElementById( 'list' );

            w = w.replace( /^([0-9]{3})([0-9]+)$/, '$1-$2' );
            e.value = w;

            if( w == buf && !mode ) return;
            buf = w;
            while( p.hasChildNodes( ) ) p.removeChild( p.firstChild );

            if( w ) {
              if( t = w.match( /^(post(\s+|)|)([0-9\-]+)/i ) ) {
                w = " ZIP_CODE LIKE '" + t[3] + "%'";
              } else if( t = w.match( /^tel(\s+|)(.*)$/i ) ) {
                w = " TEL LIKE '" + t[2] + "%'";
              } else {
                w = w.replace( /(.+?)(\s+|$)/g, " ROMAN LIKE '%$1%' AND").replace( /AND$/, '');
              }
              Page.sendSQL( sql_select + w + ' LIMIT ' + m, makeList );
            }

          };
        })(
            function ( obj ) {
              var dt = obj.responseText;
              document.getElementById( 'list' ).innerHTML = dt ? /^Error!/.test( dt ) ?
                dt.replace( /\x1f|\x1e/g, '<hr>' ):
                '<table border="1"><tr>' + 'ID,郵便番号,住所,住所2,市外局番,佐川急便,ペリカン便,名鉄運輸'.replace( /(.+?)(,|$)/g, '<th>$1' ) +
                  dt.replace( /(.+?)(\x1e|$)/g, '\n<tr>$1</tr>').replace( /(<tr>|)(.*?)(\x1f|(<\/tr>))/g, '$1<td>$2</td>$4'):
                'No Data.';
            }
          ),


      'sendSQL': (function ( ) {
          return function ( sql, func ) {
            sql && sendRequest( func || function ( ) { ; }, { 'cmnd': sql }, 'POST', 'sql.php', true, true );
          };
        })()
   };


    var option = getLocation ( );


    var Listener = (function ( getCellsValue, opt ) {
      var timerId = null;
      var before  = null;
      var table   = {
        '@ID': 0, '@ZIPCODE': 1, '@ADDRESS1': 2, '@ADDRESS2': 3,
        '@TEL': 4,'@SAGAWA': 5, '@PERIKAN': 6, '@MEITETU': 7
      };
      
      return function ( evt ) {
        var e  = evt./*@if( @_jscript ) srcElement @else@*/ target /*@end@*/;
        var t, p, c;

        switch( evt.type ) {
          case 'keyup':
            if( 'key' == e.id ) {
              clearTimeout( timerId );
              timerId = setTimeout( Page.list, _WAIT_TIME );
            }
            break;
          
          case 'mouseover':
            before && ( before = ( before.className = '', null ) );
            if( 'TD' === e.nodeName ) {
              before = e.parentNode;
              before.className = 'TargetColor';
            }
            break;
          
          case 'click':
            'key' == e.id && e.select();
            if( 'TD' === e.nodeName ) {
              c = getCellsValue( p = e.parentNode );
              t = '〒 ' + c[1] + '\n' + c[2] + ' ' + c[3] + '\n TEL: ' + c[4] + '-';
              /*@ clipboardData.setData( 'Text', t); @*/

              var w = window.opener, k, e, t, v;
              if( w ) {
                for( k in opt ) {
                  if( !/^key$/i.test( k ) && !opt.hasOwnProperty( key ) ) {
                    e = w.document.getElementsByName( k );
                    if(! e.length ) e = [ w.document.getElementById( k ) ];

                    t = table[ opt[k] ];
                    if( 'number' == typeof t )
                      for( var i = 0, o; o = e[ i++ ]; )
                        o.value = c[t];
                  }
                }
                window.close();
              }
            }
            break;
          default:
        }
      };})(
          function ( tr, n ) {
            var node = tr.childNodes, val = [ ], cnt, obj;
            for( cnt = 0; obj = node[ cnt++ ]; )
              if( /TD|TH/.test( obj.nodeName ) )
                val.push( obj./*@if( @_jscript ) innerText @else@*/ textContent /*@end@*/ );
            return val;
          },
          option
        );

    addEvent( document, 'keyup', Listener );
    addEvent( document, 'click', Listener );
    addEvent( document, 'mouseover', Listener );

    formElementKeeper( 100, 'SearchMax', 'ziportel' );
    AutoFocus( document, 'blur focus' );
    
    if( option.key ) Page.list( option.key );

  })();
  
  </script>

</body>
</html>