Zip Code Query Js+xml version

Js|xml

"Original author" Congxing (CNCXZ) [e-mail:cncxz@126.com]
"keywords" javascript xml zip code
"Code Download"Http://www.thisky.cn/down/jsxmlzip.rar

These days make a system of ZIP code query function, whim made this js+xml version, because the amount of XML data (more than 2000 records), so if the speed is slow, there will be a pause in the phenomenon, I have intended to preload the XML data, Unfortunately failed to achieve (light found the way to preload the picture, you need to know the way to preload XML can tell me, thank you). The following is the core code of the postcode query Js+xml version:

1, data.xml file code (only 5 listed here, understand his structure can):
<?xml version= "1.0" encoding= "gb2312"?>
<!--ZIP code data-->
<MyData>
<item province= "Beijing" county= "Beijing" zipcode= "100000" areacode= "010"/>
<item province= "Beijing" county= "Tongxian" zipcode= "101100" areacode= "010"/>
<item province= "Beijing" county= "changping" zipcode= "102200" areacode= "010"/>
<item province= "Beijing" county= "daxing" zipcode= "102600" areacode= "010"/>
<item province= "Beijing" county= "Miyun" zipcode= "101500" areacode= "010"/>
</MyData>

2, index.htm file code (this is the main interface pull)
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<title>js+xml ZIP Code Search </title>
<style type= "Text/css" >
<!--
body,td,th {
font-size:12px;}

Body {
Text-align:center;
Background-color: #fefefe;
margin-left:0px;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
}
. maintable{
Background-color: #FFFFFF; border:1px solid #dddddd;
}
. foot{
Line-height:20px;text-align:left;
}
. Foot A:link,.foot A:visited,.foot a:active{
Background-color: #f0f0f0; width:45px; height:20px;
margin:5px 0px 0px 0px;padding:3px 3px 2px 3px;
border-right:1px solid #cccccc; border-bottom:1px solid #cccccc;
border-top:1px solid #f5f5f5; border-left:1px solid #f5f5f5;
Color: #000000; text-align:center;
line-height:14px;font-size:12px;
}
. Head td{
font-size:14px; letter-spacing:2px;
border-bottom:1px solid #dddddd;
text-align:center;height:24px;
FILTER:progid:DXImageTransform.Microsoft.Gradient (startcolorstr= ' #fafafa ', endcolorstr= ' #f0f0f0 ', gradienttype= ' 0 ');
}

. item{
font-size:12px;height:20px;
text-indent:5px;
border-bottom:1px solid #dddddd;
Background-color: #fafafa;
}

. over{
font-size:12px;height:20px;
text-indent:5px;
border-bottom:1px solid #dddddd;
Background-color: #f5f5f5;
}

. Searchbar {
font-size:12px; letter-spacing:2px;
border-bottom:1px solid #dddddd;
padding:5px 0px 3px 0px;
margin:4px 0px 4px 0px;
text-align:center;height:24px;
FILTER:progid:DXImageTransform.Microsoft.Gradient (startcolorstr= ' #f5f5f5 ', endcolorstr= ' #eeeeee ', gradienttype= ' 0 ');
}
. Searchbar input.textfield{
border-top:1px solid #dddddd; border-left:1px solid #dddddd;
border-right:1px solid #ffffff; border-bottom:1px solid #ffffff;
Background-color: #f5f5f5; line-height:18px;
width:240px; height:22px;
}
. Searchbar span.button{
border:1px outset #f0f0f0;
Background-color: #fafafa;
width:50px; height:20px;
padding:3px 3px 2px 3px;
Cursor:hand;
}
-->
</style>
<script language= "JavaScript" >
<!--
function Data_load (keywords,keyfield,regexptype) {
var myxmlpath= "Data.xml"; To set the XML file path
var Myholder=document.getelementbyid ("Insertdiv");
var Myfoot=document.getelementbyid ("Footdiv");
var mytableid= "Table_";


var myxmldoc = new ActiveXObject ("Microsoft.XMLDOM");
Myxmldoc.async= "false";
Myxmldoc.load (Myxmlpath);
var xmlobj=myxmldoc.documentelement;
var mynodes = myXmlDoc.documentElement.childNodes;
var mycount=0;
var mypagesize=20;
var mypageindex=1;

var Mytable,mytr,mytd;
for (Var i=0;i<mynodes.length;i++) {

var mycheck=data_filter (Keywords,mynodes (i) getattribute (Keyfield), regexptype);
if (mycheck==true) {
mycount++;
if ((myCount-1) = = (myPageIndex-1) *mypagesize) {
Mytable=document.createelement ("<table id= '" + Mytableid + mypageindex + "' style= ' display:none; width:100%; ' border=") 0> ");
Mytable.classname= "Maintable";
Mytr=mytable.insertrow ();
Mytr.classname= "Head"; Set table header CSS
Mytd=mytr.insertcell ();
mytd.innertext= "Provinces";
Mytd=mytr.insertcell ();
mytd.innertext= "Area";
Mytd=mytr.insertcell ();
mytd.innertext= "ZIP Code";
Mytd=mytr.insertcell ();
mytd.innertext= "Area code";
}

Mytr=mytable.insertrow ();
Mytd=mytr.insertcell ();
Mytr.classname= "Item"; Set Content CSS
Mytd.innertext=mynodes (i). getattribute ("province");
Mytd=mytr.insertcell ();
Mytd.innertext=mynodes (i). getattribute ("County");
Mytd=mytr.insertcell ();
Mytd.innertext=mynodes (i). getattribute ("Zipcode");
Mytd=mytr.insertcell ();
Mytd.innertext=mynodes (i). getattribute ("AreaCode");

Mytr.attachevent ("onmouseover", itemover);
Mytr.attachevent ("onmouseout", itemout);

if (mycount== (mypageindex) *mypagesize) {
Myholder.appendchild (myTable); Add Table
var myspan=document.createelement ("<span>");
Myspan.innerhtml= "<a href= ' # ' onclick= ' Javacript:pagechange (\" "+ Mytableid + mypageindex +" \ ") ' > No. ' +myPageIndex + "Page </a>";
Myfoot.appendchild (MySpan);
mypageindex++;
}
}

}
if (mycount>0) {
if (mycount> (myPageIndex-1) *mypagesize&&mycount!=mypageindex*mypagesize) {
Myholder.appendchild (myTable); Add Table
var myspan=document.createelement ("<span>");
Myspan.innerhtml= "<a href= ' # ' onclick= ' Javacript:pagechange (\" "+ Mytableid + mypageindex +" \ ") ' > No. ' +myPageIndex + "Page </a>";
Myfoot.appendchild (MySpan);
mypageindex++;
}

var myinfo=document.createelement ("<span>");
var mypagenum= (mypageindex*mypagesize>mycount)? (myPageIndex-1): Mypageindex;
Myinfo.innerhtml= "Total" "+mycount+" "article Information, each page" + mypagesize+ "section, the" +mypagenum+ "page display. ";
Myfoot.appendchild (MyInfo);
Pagechange (Mytableid + "1");
}else{
var myinfo=document.createelement ("<span>");
Myinfo.innerhtml= "Sorry, did not find any relevant data ...";
Myfoot.appendchild (MyInfo);
}
document.getElementById ("Waiting"). style.display= "None";
}

function Data_filter (inputwords,inputfieldvalue,regexptype) {
Inputwords=inputwords.replace (/(^\s*) | ( \s*$)/g, "");
Inputfieldvalue=inputfieldvalue.replace (/(^\s*) | ( \s*$)/g, "");
Switch (regexptype) {
Case 0://equals
if (Inputwords==inputfieldvalue) {
return true;
}else{
return false;
}
Break
Case 1://Included
if (Inputfieldvalue.indexof (inputwords) >-1) {
return true;
}else{
return false;
}
Break
Case 2://To ... Beginning
if (inputfieldvalue.substring (0,inputwords.length) ==inputwords) {
return true;
}else{
return false;
}
Break
Case 3://To ... End
if (Inputfieldvalue.substring (Inputfieldvalue.indexof (inputwords), inputfieldvalue.length) ==inputWords) {
return true;
}else{
return false;
}
Break
Default://Equals
if (Inputwords==inputfieldvalue) {
return true;
}else{
return false;
}
Break
}

return false;
}

function Pagechange (showid) {
var Myholder=document.getelementbyid ("Insertdiv");
for (var i=0;i<myholder.childnodes.length; i++) {
var mynode = myholder.childnodes[i];
if (myNode.nodeName.toLowerCase () = = "Table") {mynode.style.display= "none";}
}
document.getElementById (showid). style.display= "";
}
function Itemover () {
var t=event.srcelement.parentelement;
T.origclassname=t.classname;
T.classname= "Over";
}
function Itemout () {
var t=event.srcelement.parentelement;
T.classname=t.origclassname;
}

function Data_search (keywords,keyfield,regexptype) {
Keywords=keywords.replace (/(^\s*) | ( \s*$)/g, "");
Keyfield=keyfield.replace (/(^\s*) | ( \s*$)/g, "");
Regexptype=parseint (regexptype,10);
if (keywords== "" | | Keywords==null) {
Alert ("Please enter the query keyword!") \ n ");
}else{
document.getElementById ("Waiting"). style.display= "";
var Myholder=document.getelementbyid ("Insertdiv");
var Myfoot=document.getelementbyid ("Footdiv");
Myholder.innerhtml= "";
Myfoot.innerhtml= "";
settimeout ("Data_load" (' +keywords+ ", '" +keyfield+ "," +regexptype+ ")", 1500);
}
}
-->
</script>

<body>
<div id= "Control" style= "width:560px;" >
<div id= "Searchbar" class= "Searchbar" style= "width:100%"; >
<select name= "Select_field" id= "Select_field" >
<option value= "province" Selected> province </option>
<option value= "County" > Area </option>
<option value= "Zipcode" > Zip </option>
<option value= "AreaCode" > Area code </option>
</select>
<select name= "Select_reg" id= "Select_reg" >
<option value= "0" selected> equals </option>
<option value= "1" > Include </option>
<option value= "2" > ... Opening </option>
<option value= "3" > ... End </option>
</select>
<input name= "Text_words" type= "Text" id= "Text_words" value= "Shandong" class= "TextField" >
<span class= "button" > Search </span>
</div>
<div id= "Insertdiv" style= "width:100%;" ></div>
<div id= "Footdiv" class= "foot" style= "width:100%"; ></div>
<table id= "Waiting" width= "border=" 0 "align=" center "cellpadding=" 1 "cellspacing=" 1 "style=" display:none; Background-color: #dddddd; margin:10px 0px 10px 0px; " >
<tr>
&LT;TD style= "Background-color: #ffffff;" >
<marquee direction= "Right" height= "100%" width= "100%" scrollamount= "9" scrolldelay= "0" >
<span style= "WIDTH:6PX; height:20px; Background-color: #999999; margin:-5px 2px-5px 2px; " ></span>
<span style= "WIDTH:6PX; height:20px; Background-color: #999999; margin:-5px 2px-5px 2px; " ></span>
<span style= "WIDTH:6PX; height:20px; Background-color: #999999; margin:-5px 2px-5px 2px; " ></span>
</marquee>
</td>
</tr>
</table>
</div>

</body>