jquery拼音转汉字搜索

最新推荐文章于 2023-12-04 19:52:44 发布

weixin_33834910

最新推荐文章于 2023-12-04 19:52:44 发布

阅读量1.1w

点赞数

文章标签： javascript xhtml ViewUI

这篇博客介绍了如何使用jQuery实现拼音到汉字的搜索功能，通过HTML和JavaScript技术，结合特定的JS库如ISCityV2.1.js和ISStationName.js，帮助用户在网页中进行拼音搜索。

摘要由CSDN通过智能技术生成

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:#ff0000
101 }
102 .c a:visited {
    
103     text-decoration: none; color:#ff0000
104 }
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"