HTML：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 4 <head> 5 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 6 <title>jquery拼音转汉字搜索</title> 7 <script language="jscript" type="text/jscript"> 8 function upcase(src){ 9 sVal=new String(src.value) 10 src.value=sVal.toUpperCase() 11 } 12 </script> 13 14 15 16 <script language="javascript" type="text/javascript"> 17 function showjianpan(sid) 18 { 19 whichEl = eval("jianpan" + sid); 20 if (whichEl.style.display == "none") 21 { 22 eval("jianpan" + sid + ".style.display=\"\";"); 23 } 24 else 25 { 26 eval("jianpan" + sid + ".style.display=\"none\";"); 27 } 28 } 29 </script> 30 <style type="text/css"> 31 <!-- 32 33 .STYLE2 {color: #FF0000;} 34 .style1 { font-family: "宋体"; 35 font-weight: bold; 36 } 37 .style8 {color: #FFFFFF;} 38 .style9 {color: #FFFFFF; font-weight: bold; } 39 .style5 { color: #FF3333; 40 font-size: 18pt; 41 font-family: "黑体"; 42 font-weight: bold; 43 font-style: italic; 44 } 45 .style7 {font-size: 36pt;} 46 47 .inputa { 48 BORDER-RIGHT: #c0c0c0 1px solid; BORDER-TOP: #c0c0c0 1px solid; FONT-SIZE: 14px; MARGIN-BOTTOM: -2px; BORDER-LEFT: #c0c0c0 1px solid; COLOR: #666666; BORDER-BOTTOM: #c0c0c0 1px solid; HEIGHT: 20px; WIDTH: 112px; 49 } 50 .cityflip:link { 51 FONT-SIZE: 12px; COLOR: #0055aa; TEXT-DECORATION: none 52 } 53 .cityflip:active { 54 FONT-SIZE: 12px; COLOR: #0055aa; TEXT-DECORATION: none 55 } 56 .cityflip:visited { 57 FONT-SIZE: 12px; COLOR: #0055aa; TEXT-DECORATION: none 58 } 59 .cityflip:hover { 60 FONT-SIZE: 12px; COLOR: #0055aa; TEXT-DECORATION: underline 61 } 62 #form_cities { 63 BORDER-RIGHT: #bbbbbb 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #bbbbbb 1px solid; DISPLAY: none; PADDING-LEFT: 2px; LEFT: 0px; PADDING-BOTTOM: 2px; BORDER-LEFT: #bbbbbb 1px solid; WIDTH: 162px; PADDING-TOP: 2px; BORDER-BOTTOM: #bbbbbb 1px solid; FONT-FAMILY: Arial; POSITION: absolute; TOP: 55px; BACKGROUND-COLOR: #ffffff; 64 } 65 #top_cities { 66 PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; COLOR: #666666; PADDING-TOP: 2px; BORDER-BOTTOM: gray 1px dashed 67 } 68 #panel_cities { 69 COLOR: #0055aa; FONT-FAMILY: Arial; HEIGHT: 200px 70 } 71 #panel_cities DIV { 72 PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; MARGIN: 1px 0px; CURSOR: pointer; PADDING-TOP: 2px; BACKGROUND-COLOR: #ffffff; TEXT-ALIGN: right 73 } 74 #panel_cities SPAN { 75 PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; COLOR: #0055aa; PADDING-TOP: 1px 76 } 77 .cityline { 78 BORDER-TOP: white 1px solid; COLOR: #666666; BORDER-BOTTOM: white 1px solid; HEIGHT: 18px; BACKGROUND-COLOR: white 79 } 80 .citylineover { 81 BORDER-TOP: #68a7f6 1px solid; BORDER-BOTTOM: #68a7f6 1px solid; HEIGHT: 18px; BACKGROUND-COLOR: #c8e3fc 82 } 83 .lalign { 84 FLOAT: right; TEXT-ALIGN: right 85 } 86 .ralign { 87 FLOAT: left; TEXT-ALIGN: left 88 } 89 #flip_cities { 90 PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center 91 } 92 .STYLE13 {color: #083989} 93 --> 94 95 96 97 </style> 98 <style type="text/css"> 99 .c a:link {100 text-decoration: none; color:#ff0000101 }102 .c a:visited {103 text-decoration: none; color:#ff0000104 }105 .c a:hover {106 text-decoration: underline;107 }108 .c a:active {109 text-decoration: none;110 }111 .STYLE1 {color: #FF0000}112 </style>113 114 115 116 <script language="javascript" src="js/jquery-1.3.2.min.js" type="text/javascript"></script>117 <script language="javascript" src="js/ISStationName.js" type="text/javascript"></script>118 <script language="javascript" src="js/ISCityV2.1.js" type="text/javascript"></script>119 120 </head>121 <body>122 123 <div style="top:0;left:0;z-index:1000;POSITION: absolute;" >124 125 126 <div id='form_cities'>127 <div id='top_cities'> 128 操作提示 </div>129 <div id='panel_cities'> 130 <div class='cityline' id="citem_1" cturn='12'><span class='lalign'>上海</span><span class='ralign'>Shanghai</span></div> 131 </div>132 <div id='flip_cities'> 133 翻页控制区 </div>134 </div>135 136 137 138 </div><!----> 139 140 141 142 143 <form action="http://chaxun.shike.org.cn/FindResult.asp" method="post" target="_blank" onSubmit="return dijiaopanduan();">144 <table width="91%" border="0" align="center" cellpadding="0" cellspacing="0">145 <tr>146 <td width="56%"><table width="352" height="251" border="0" cellpadding="0" cellspacing="0">147 <div align="left" onclick="javascript:RdChecked(0);">148 <tr>149 <td width="352" height="32" valign="bottom"><input name="Rb_Type" type="radio" value="ZZ" checked="checked" />150 <span class="shen">站站查询</span> </td>151 </tr>152 <tr>153 <td height="38"> 发站： 154 <input name="Txt_FZ" id="txtChuFaZhan" class="inputa"/> 155 到站：156 <input name="Txt_DZ" id="txtDaoDaZhan" class="inputa"/> 157 </td>158 </tr></div>159 160 <div align="left">161 <tr>162 <td height="36" valign="bottom">163 <input type="radio" name="Rb_Type" value="CC" />164 <span class="shen">车次查询</span> </td>165 </tr>166 <tr>167 <td height="38"> 车次：168 <input name="Txt_CC" type="text" id="Txt_CC" size="11" maxlength="12" onFocus="javascript:RdChecked(1);" onKeyPress="upcase(this)" onblur="upcase(this)" /></td>169 </tr></div>170 171 <div align="left" onClick="javascript:RdChecked(2);">172 <tr>173 <td height="36" valign="bottom"><span class="style1">174 <input type="radio" name="Rb_Type" value="CZ" />175 <span class="shen">车站查询</span></span></td>176 </tr>177 <tr>178 <td height="38" > 车站：179 <input name="Txt_CZ" id="txtCheZhanMing" class="inputa"/></td>180 </tr></div>181 </table>182 </form> 183 184 185 186 <script language="javascript" type="text/javascript">187 function enter(obj, string) {188 obj.Txt_CC.value += string189 }190 191 function enter_zimu(obj, string) {192 obj.Txt_CC.value = string193 }194 195 function tuige(obj) {196 obj.Txt_CC.value = obj.Txt_CC.value.substr(0,obj.Txt_CC.value.length-1)197 198 }199 200 function clearall(obj) {201 obj.Txt_CC.value = ''202 }203 </script>204 205 206 </body>207 208 </html>
ISCityV2.1.js
1 //document.writeln(""); 2 /* 3 * City list for Js 4 * Update 20090520 5 * 6 */ 7 function ht_getcookie(name) { 8 var cookie_start = document.cookie.indexOf(name); 9 var cookie_end = document.cookie.indexOf(";", cookie_start); 10 return cookie_start == -1 ? '' : unescape(document.cookie.substring(cookie_start + name.length + 1, (cookie_end > cookie_start ? cookie_end : document.cookie.length))); 11 } 12 function ht_setcookie(cookieName, cookieValue, seconds, path, domain, secure) { 13 var expires = new Date(); 14 expires.setTime(expires.getTime() + seconds*1000); 15 document.cookie = escape(cookieName) + '=' + escape(cookieValue) 16 + (expires ? '; expires=' + expires.toGMTString() : '') 17 + (path ? '; path=' + path : '/') 18 + (domain ? '; domain=' + domain : '') 19 + (secure ? '; secure' : ''); 20 } 21 22 23 //var cities='@Beijing|北京|1100@Shanghai|上海|3100@Hangzhou|杭州|3301@Suzhou|苏州|3205@Nanjing|南京|3201@Wuxi|无锡|3202@Tianjin|天津|1200@Chengdu|成都|5101@Chongqing|重庆|5000@Xian|西安|6101@Wuhan|武汉|4201@Zibo|淄博|3703@Hefei|合肥|3401@Jinan|济南|3701@Fuzhou|福州|3501@Dalian|大连|2102@Nanning|南宁|4501@Guilin|桂林|4503@Shenyang|沈阳|2101@Taiyuan|太原|1401@Wuhu|芜湖|3402@Yiwu|义乌|3307@Zhengzhou|郑州|4101@Changchun|长春|2201@Changsha|长沙|4301@Guangzhou|广州|4401@kunshan|昆山|3214@Ningbo|宁波|3302@Xiamen|厦门|3502@Nantong|南通|3206@Taizhou|泰州|3212@Changzhou|常州|3204@Haerbin|哈尔滨|2301@Qingdao|青岛|3702@Shenzhen|深圳|4403@Yangzhou|扬州|3210@Zhenjiang|镇江|3211@Shijiazhuang|石家庄|1301@Putian|莆田|3503@'; 24 25 var array_cities = [];//完整城市列表 26 var array_cities_filter=[];//当前搜索结果 27 var array_cities_showing=[];//显示中的城市 28 var sugSelectItem= 0 ;//选中项目 29 var sugSelectTurn= 0 ;//显示中选中项的序号 30 var citySelected =0;//选中城市[SHIJIAZHUANG, 石家庄, 1301] 31 var cityfield_focused=false;//输入框是否获得焦点 32 var mousedownOnPanel=false;//鼠标按在菜单上 33 var curPageIndex=0;//当前分页序号 34 var curObj=null; //当前作用对象 35 36 //分拆城市信息 37 var cities = cities.split('@'); 38 var favcityID = ht_getcookie("hj_favcity"); 39 for(var i=0; i<cities.length; i++){ 40 var titem = cities[i]; 41 if(titem.length>0){ 42 titem = titem.split('|'); 43 if(favcityID!="" && titem[2]== favcityID){ 44 favcity = titem; 45 array_cities.unshift(titem); 46 //当fav城市位于第一页时，避免重复显示 47 if(i>8){ 48 array_cities.push( titem ); 49 } 50 }else{array_cities.push( titem );} 51 } 52 } 53 for(var i=0; i<array_cities.length; i++){array_cities[i].push(i);} 54 //显示给定的城市列表片段 55 function city_Bind(acitylist){ 56 if(acitylist.length==0) 57 return; 58 var tHtml = ""; 59 $.each( 60 acitylist, 61 function(aIndex){ 62 if(favcityID == acitylist[aIndex][2] ) 63 tHtml+= "<div class='cityline' id='citem_"+ aIndex +"' cturn='"+ acitylist[aIndex][3] +"'><span class='lalign'><b>"+ acitylist[aIndex][0] +"</b></span><span class='ralign'><b>"+ acitylist[aIndex][1] +"</b></span></div>\n"; 64 else 65 tHtml+= "<div class='cityline' id='citem_"+ aIndex +"' cturn='"+ acitylist[aIndex][3] +"'><span class='lalign'>"+ acitylist[aIndex][0] +"</span><span class='ralign'>"+ acitylist[aIndex][1] +"</span></div>\n"; 66 } 67 ); 68 $('#panel_cities').html(tHtml); 69 $('.cityline').mouseover( 70 function(){city_shiftSelect(this);} 71 ).click( 72 function(){city_confirmSelect();} 73 ); 74 city_shiftSelect( $("#citem_0")); 75 } 76 //移动当前选中项 77 function city_changeSelectIndex(aStep){ 78 var asugSelectTurn = sugSelectTurn + aStep; 79 if(asugSelectTurn ==-1){ 80 city_showlist(curPageIndex -1); 81 city_shiftSelect( $("#citem_"+ (array_cities_showing.length-1) )); 82 }else if (asugSelectTurn== array_cities_showing.length){ 83 city_showlist(curPageIndex +1); 84 city_shiftSelect( $("#citem_0" )); 85 }else{ 86 city_shiftSelect( $("#citem_"+ asugSelectTurn )); 87 } 88 } 89 //确认选择 90 function city_confirmSelect(){ 91 curObj.val( citySelected[1] ); 92 // ht_setcookie("hj_favcity", citySelected[2], 99999); 93 // ht_setcookie("hj_favcityname", citySelected[1], 99999); 94 $("#form_cities").css("display","none"); 95 // if( $("#beginDate").val().length==0 ){ 96 // $("#beginDate").focus(); 97 // } 98 } 99 //指定新的选中项，恢复旧项100 function city_shiftSelect(atarget){101 if(sugSelectItem!=atarget){102 if(sugSelectItem !=0)103 $(sugSelectItem).removeClass('citylineover').addClass('cityline').css("backgroundColor", "white");104 if(atarget!=0){105 try{106 sugSelectItem = atarget;107 var city_j = $(sugSelectItem).removeClass('cityline').addClass('citylineover').css("backgroundColor", "#c8e3fc"); 108 sugSelectTurn = Number(city_j.attr('id').split("_")[1]);109 citySelected = array_cities[ Number(city_j.attr('cturn'))]; 110 $("#cityid").val( citySelected[2] );111 }catch(e){}112再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow