本文主要为大家详细介绍了js实现带导航城市列表以及输入搜索功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。
实现功能：
1.加载城市列表，并生成索引（没有该索引的城市则无索引）
2.点击索引滚动页面到对应索引城市第一个位置
3.输入搜索
分析：
1.加载城市很容易，生成对应的索引。
首先需要得到所有的城市，然后拿出城市的首字母，放入一个数组中，去重并排序，
得到无重复并有序的索引数组后加入到p中显示
2.根据索引进行页面滚动
需要给索引列表添加事件，由于锚点会在链接产生带#号的地址，以及页面会有刷动的效果，索引这里不使用锚点，
因此这里使用jquery或者js的方法进行页面自行滚动
3.进行搜索
首先对整个body内容进行检索，其次对城市列表里面的内容进行检索，查找具体位置，然后高亮显示以及通过添加class或者其它进行快速定位
其余的就是样式问题了。
效果图：
代码：
<%@ page language="java" contenttype="text/html; charset=utf-8"
pageencoding="utf-8"%>
<%@ include file="/web-inf/page/common/tablib.jsp"%>
<!doctype html>
<html lang="zh">
<head>
<meta name='viewport'
content='width=device-width, initial-scale=1.0, maximum-scale=1.0'
charset="utf-8" />
<title></title>
<script>
var title = "选择";
title += "城市";
document.title = title;
</script>
<link rel="stylesheet" href="<%=basepath%>/css/base.css" rel="external nofollow" >
<script src="<%=basepath%>/js/jquery-1.9.0.min.js"></script>
<link rel="stylesheet" href="<%=basepath%>/partnercss/${style_path}.css" rel="external nofollow" >
<style>
a:link,a:visited{
text-decoration:none; /*超链接无下划线*/
color: blue;
}
#float_zm {
margin: 2% 2% 2% *;
z-index: 90;
width: 11%;
height: 90%;
right: 5px;
position:fixed;
}
#city_p {
padding: 0% 2% 2% 1%;
width:100%;
float: left;
margin-top: 2%;
}
#float_table {
right: 5%;
top: 9%;
position: fixed;
height: 90%;
text-align: center;
color: blue;
width:25%;
}
#float_table tr td{
text-align: right;
}
#data {
width:100%;
}
#data tr td {
border-bottom: 1px solid #e5e5e5;
padding: 2% 1% 2% 1%;
}
#data tr td a{
width:100%;
}
.highlight { background: yellow; color: red; }
#showselectzm{
position:absolute;
left:45%;
top:40%;
border:3px solid #b2d0f7;
padding:10px;
font:bold 14px verdana,tahoma,helvetica;
color:#003366;
width:8%;
text-align:center;
}
#seachinput {
width: 78%;
}
#folat_top_p {
/*
//<!-比导航的字母高一点，不然点击点到字母上去了->
*/
z-index: 93;
padding-top: 3%;
position: fixed;
padding-left: 5%;
width: 95%;
height: 9%;
background-color: #efefef;
}
#body_p {
float: left;
width: 100%;
}
.zhanwei_p {
height: 9%;
}
.fade{
position:fixed;
right:0;
bottom:0;
_position:absolute;
_top:expression(documentelement.scrolltop + documentelement.clientheight-this.offsetheight);
}
.formtips.fade {
animation: 3s ease 0s normal both 1 running fade;
}
.fade {
bottom: 0;
position: fixed;
right: 0;
}
.formtips {
left: 0;
position: absolute;
text-align: center;
width: 100%;
z-index: 9999;
}
.formtips span {
background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
border-radius: 5px;
color: #fff;
font-size: 14px;
padding: 8px 10px;
}
</style>
</head>
<body class="wrapbg">
<!-- 点击字母提示，暂未使用 -->
<p id="showselectzm" style="display: none;">
<span id="showzmspan"></span>
</p>
<!-- 必须使用隐藏的，js中url参数会有问题(&) -->
<input type="hidden" value="${last_url }" id="lasturl">
<p id="folat_top_p">
<input id="seachinput" name="seachinput" placeholder="输入城市中文名"><!-- 输入城市或城市首字母 -->
<button id="seachbutton">查找</button>
</p>
<p id="body_p">
<!-- 列表城市 -->
<p id="city_p">
<table id="data">
</table>
</p>
<!-- 首字母索引层 -->
<p id="float_zm" style="vertical-align: middle;">
<table id="float_table">
</table>
</p>
</p>
</body>
<script>
var strchinesefirstpy = "ydyqsxmwzssxjbymgcczqpssqbycdscdqldylybssjgyzzjjfkcclzdhwdwzjljpfyynwjjtmyhzwzhflzppqhgscyyynjqyxxgjhhsdsjnkktmomlcrxypsnqseccqzggllyjlmyzzsecykyyhqwjssggyxyzyjwwkdjhychmyxjtlxjyqbyxzldwrdjrwysrldzjpcbzjjbrcftleczstzfxxzhtrqhybdlyczssymmrfmyqzpwwjjyfcrwfdfzqpyddwyxkyjawjffxypsftzyhhyzyswcjyxsclcxxwzzxnbgnnxbxlzszsbsgpysyzdhmdzbqbzcwdzzyytzhbtsyybzgntnxqywqskbphhlxgybfmjebjhhgqtjcysxstkzhlyckglysmzxyalmeldccxgzyrjxsdltyzcqkcnnjwhjtzzcqljststbnxbtyxceqxgkwjyflzqlyhyxspsfxlmpbysxxxydjczylllsjxfhjxpjbtffyabyxbhzzbjyzlwlczggbtssmdtjzxpthyqtgljscqfzkjzjqnlzwlslhdzbwjncjzyzsqqycqyrzcjjwybrtwpyftwexcskdzctbzhyzzyyjxzcffzzmjyxxsdzzottbzlqwfckszsxfyrlnyjmbdthjxsqqccsbxyytsyfbxdztgbcnslcyzzpsazyzzscjcshzqydxlbpjllmqxtydzxsqjtzpxlcglqtzwjbhctsyjsfxyejjtlbgxsxjmyjqqpfzasyjntydjxkjcdjszcbartdclyjqmwnqnclllkbybzzsyhqqltwlccxtxllzntylnewyzyxczxxgrkrmtcndnjtsyyssdqdghsdbjghrwrqlybglxhlgtgxbqjdzpyjsjyjctmrnymgrzjczgjmzmgxmpryxkjnymsgmzjymkmfxmldtgfbhcjhkylpfmdxlqjjsmtqgzsjlqdldgjycalcmzcsdjllnxdjffffjczfmzffpfkhkgdpsxktacjdhhzddcrrcfqyjkqccwjdxhwjlyllzgcfcqdsmlzpbjjplsbcjggdckkdezsqcckjgcgkdjtjdlzycxklqscgjcltfpcqczgwpjdqyzjjbyjhsjdzwgfsjgzkqcczllpspkjgqjhzzljplgjgjjthjjyjzczmlzlyqbgjwmljkxzdznjqsyzmljlljkywxmkjlhskjgbmclyymkxjqlbmllkmdxxkwyxyslmlpsjqqjqxyxfjtjdxmxxllcxqbsyjbgwymbggbcyxpjygpepfgdjgbhbnsqjyzjkjkhxqfgqzkfhygkhdkllsdjqxpqykybnqsxqnszswhbsxwhxwbzzxdmnsjbsbkbbzklylxgwxdrwyqzmywsjqlcjxxjxkjeqxscyetlzhlyyysdzpaqyzcmtlshtzcfyzyxyljsdcjqagyslcqlyyyshmrqqkldxzscsssydycjysfsjbfrsszqsbxxpxjysdrckgjlgdkzjzbdktcsyqpyhstcldjdhmxmcgxyzhjddtmhltxzxylymohyjcltyfbqqxpfbdfhhtksqhzyywcnxxcrwhowgyjlegwdqcwgfjycsntmytolbygwqwesjpwnmlrydzsztxyqpzgcwxhngpyxshmyqjxztdppbfyhzhtjyfdzwkgkzbldntsxhqeegzzylzmmzyjzgxzxkhkstxnxxwylyapsthxdwhzympxagkydxbhnhxkdpjnmyhylpmgocslnzhkxxlpzzlbmlsfbhhgygyyggbhscyaqtywlxtzqcezydqdqmmhtkllszhlsjzwfyhqswscwlqazynytlsxthaznkzzszzlaxxzwwctgqqtddyztcchyqzflxpslzygpzsznglndqtbdlxgtctajdkywnsyzljhhzzcwnyyzywmhychhyxhjkzwsxhzyxlyskqyspslyzwmyppkbyglkzhtyxaxqsyshxasmchkdscrswjpwxsgzjlwwschsjhsqnhcsegndaqtbaalzzmsstdqjcjktscjaxplggxhhgxxzcxpdmmhldgtybysjmxhmrcpxxjzckzxshmlqxxtthxwzfkhcczdytcjyxqhlxdhypjqxylsyydzozjnyxqezysqyayxwypdgxddxsppyzndltwrhxydxzzjhtcxmczlhpyyyymhzllhnxmylllmdcppxhmxdkycyrdltxjchhzzxzlcclylnzshzjzzlnnrlwhyqsnjhxyntttkyjpychhyegkcttwlgqrlggtgtygyhpyhylqyqgcwyqkpyyyttttlhyhlltyttsplkyzxgzwgpydsszzdqxskcqnmjjzzbxyqmjrtffbtkhzkbxljjkdxjtlbwfzpptkqtztgpdgntpjyfalqmkgxbdclzfhzclllladpmxdjhlcclgyhdzfgyddgcyyfgydxkssebdhykdkdkhnaxxybpbyyhxzqgaffqyjxdmljcsqzllpchbsxgjyndybyqspzwjlzksddtactbxzdyzypjzqsjnkktknjdjgyypgtlfyqkasdntcyhblwdzhbbydwjrygkzyheyyfjmsdtyfzjjhgcxplxhldwxxjkytcyksssmtwcttqzlpbszdzwzxgzagyktywxlhlspbclloqmmzsslcmbjcszzkydczjgqqdsmcytzqqlwzqzxssfpttfqmddzdshdtdwfhtdyzjyqjqkypbdjyyxtljhdrqxxxhaydhrjlklytwhllrllrcxylbwsrszzsymkzzhhkyhxksmdsydycjpbzbsqlfcxxxnxkxwywsdzyqoggqmmyhcdzttfjyybgstttybykjdhkyxbelhtypjqnfxfdykzhqkzbyjtzbxhfdxkdaswtawajldyjsfhbldnntnqjtjnchxfjsrfwhzfmdryjyjwzpdjkzyjympcyznynxfbytfyfwygdbnzzzdnytxzemmqbsqehxfzmbmflzzsrxymjgsxwzjsprydjsjgxhjjgljjynzzjxhgxkymlpyyycxytwqzswhwlyrjlpxslsxmfswwklctnxnynpsjszhdzeptxmyywxyysywlxjqzqxzdcleeelmcpjpclwbxsqhfwwtffjtnqjhjqdxhwlbyznfjlalkyyjldxhhycstyywnrjyxywtrmdrqhwqcmfjdyzmhmyyxjwmyzqzxtlmrspwwchaqbxygzypxyyrrclmpymgksjszysrmyjsnxtplnbappypylxyyzkynldzyjzcznnlmzhharqmpgwqtzmxxmllhgdzxyhxkyxycjmffyyhjfsbssqlxxndycannmtcjcyprrnytyqnyymbmsxndlylysljrlxysxqmllyzlzjjjkyzzcsfbzxxmstbjgnxyzhlxnmcwscyzyfzlxbrnnnylbnrtgzqysatswryhyjzmzdhzgzdwybsscskxsyhytxxgcqgxzzshyxjscrhmkkbxczjyjymkqhzjfnbhmqhysnjnzybknqmclgqhwlznzswxkhljhyybqlbfcdsxdldspfzpskjyzwzxzddxjsmmegjscssmgclxxkyyylnypwwwgydkzjgggzggsycknjwnjpcxbjjtqtjwdsspjxzxnzxumelpxfsxtllxcljxjjljzxctpswxlydhlyqrwhsycsqyybyaywjjjqfwqcqqcjqgxaldbzzyjgkgxpltzyfxjltpadkyqhpmatlcpdckbmtxybhklenxdleegqdymsawhzmljtwygxlyqzljeeyybqqffnlyxrdsctgjgxyynkllyqkcctlhjlqmkkzgcyygllljdzgydhzwxpysjbzkdzgyzzhywyfqytyzszyezzlymhjjhtsmqwyzlkyywzcsrkqytltdxwctyjklwsqzwbdcqyncjsrszjlkcdcdtlzzzacqqzzddxyplxzbqjylzlllqddzqjyjyjzyxnyyynyjxkxdazwyrdljyyyrjlxlldyxjcywywnqcclddnyyynyckczhxxcclgzqjgkwppcqqjysbzzxyjsqpxjpzbsbdsfnsfpzxhdwztdwpptflzzbzdmyypqjrsdzsqzsqxbdgcpzswdwcsqzgmdhzxmwwfybpdgphtmjthzsmmbgzmbzjcfzwfzbbzmqcfmbdmcjxlgpnjbbxgyhyyjgptzgzmqbqtcgyxjxlwzkydpdymgcftpfxyztzxdzxtgkmtybbclbjaskytssqyymszxfjewlxllszbqjjjaklylxlycctsxmcwfkkkbsxlllljyxtyltjyytdpjhnhnnkbyqnfqyyzbyyessessgdyhfhwtcjbsdzztfdmxhcnjzymqwsryjdzjqpdqbbstjggfbkjbxtgqhngwjxjgdllthzhhyyyyyysxwtyyyccbdbpypzycczyjpzywcbdlfwzcwjdxxhyhlhwzzxjtczlcdpxujczzzlyxjjtxphfxwpywxzptdzzbdzcyhjhmlxbqxsbylrdtgjrrcttthytczwmxfytwwzcwjwxjywcskybzscctzqnhxnwxxkhkfhtswoccjybcmpzzykbnnzpbzhhzdlsyddytyfjpxyngfxbyqxcbhxcpsxtyzdmkysnxsxlhkmzxlyhdhkwhxxsskqyhhcjyxglhzxcsnhekdtgzxqypkdhextykcnymyyypkqyyykxzlthjqtbyqhxbmyhsqckwwyllhcyylnneqxqwmcfbdccmljggxdqktlxkgnqcdgzjwyjjlyhhqtttnwchmxcxwhwszjydjccdbqcdgdnyxzthcqrxcbhztqcbxwgqwyybxhmbymyqtyexmqkyaqyrgyzslfykkqhyssqyshjgjcnxkzycxsbxyxhyylstycxqthysmgscpmmgcccccmtztasmgqzjhklosqylswtmxsyqkdzljqqyplsycztcqqpbbqjzclpkhqzyyxxdtddtsjcxffllchqxmjlwcjcxtspycxndtjshjwxdqqjskxyamylsjhmlalykxcyydmnmdqmxmcznncybzkkyflmchcmlhxrcjjhsylnmtjzgzgywjxsrxcwjgjqhqzdqjdcjjzkjkgdzqgjjyjylxzxxcdqhhheytmhlfsbdjsyyshfystczqlpbdrfrztzykywhszyqkwdqzrkmsynbcrxqbjyfazpzzedzcjywbcjwhyjbqszywryszptdkzpfpbnztklqyhbbzpnpptyzzybqnydcpjmmcycqmcyfzzdcmnlfpbplngqjtbttnjzpzbbznjkljqylnbzqhksjznggqszzkyxshpzsnbcgzkddzqanzhjkdrtlzlswjljzlywtjndjzjhxyayncbgtzcssqmnjpjytyswxzfkwjqtkhtzplbhsnjzsyzbwzzzzlsylsbjhdwwqpslmmfbjdwaqyztcjtbnnwzxqxcdslqgdsdpdzhjtqqpswlyyjzlgyxyzlctcbjtktyczjtqkbsjlgmgzdmcsgpynjzyqyyknxrpwszxmtncszzyxybyhyzaxywqcjtllckjjtjhgdxdxyqyzzbywdlwqcglzgjgqrqzczssbcrpcskydznxjsqgxssjmydnstztpbdltkzwxqwqtzexnqczgwezkssbybrtssslccgbpszqszlccglllzxhzqthczmqgyzqznmcocszjmmzsqpjygqljyjppldxrgzyxccsxhshgtznlzwzkjcxtcfcjxlbmqbczzwpqdnhxljcthyzlgylnlszzpcxdscqqhjqksxzpbajyemsmjtzdxlcjyryynwjbngzztmjxltbslyrzpylsscnxphllhyllqqzqlxymrsycxzlmmczltzsdwtjjllnzggqxpfskygyghbfzpdkmwghcxmsgdxjmcjzdycabxjdlnbcdqygskydqtxdjjyxmszqazdzfslqxyjsjzylbtxxwxqqzbjzufbblylwdsljhxjyzjwtdjczfqzqzzdzsxzzqlzcdzfjhyspympqzmlpplffxjjnzzylsjeyqzfpfzksywjjjhrdjzzxtxxglghydxcskyswmmzcwybazbjkshfhjcxmhfqhyxxyzftsjyzfxyxpzlchmzmbxhzzsxyfymncwdabazlxktcshhxkxjjzjsthygxsxyyhhhjwxkzxssbzzwhhhcwtzzzpjxsnxqqjgzyzywllcwxzfxxyxyhxmkyyswsqmnlnaycyspmjkhwcqhylajjmzxhmmcnzhbhxclxtjpltxyjhdyylttxfszhyxxsjbjyayrsmxyplckduyhlxrlnllstyzyyqygyhhsccsmzctzqxkyqfpyyrpfflkquntszllzmwwtcqqyzwtllmlmpwmbzsstzrbpddtlqjjbxzcsrzqqygwcsxfwzlxccrszdzmcyggdzqsgtjswljmymmzyhfbjdgyxccpshxnzcsbsjyjgjmppwaffyfnxhyzxzylremzgzcyzsszdlljcsqfnxzkptxzgxjjgfmyyysnbtylbnlhpfzdcyfbmgqrrssszxysgtzrnydzzcdgpjafjfzknzblczszpsgcycjszlmlrszbzzldlsllysxsqzqlyxzlskkbrxbrbzcycxzzzeeyfgklzlyyhgzsgzlfjhgtgwkraajyzkzqtsshjjxdcyzuyjlzyrzdqqhgjzxsszbykjpbfrtjxllfqwjhylqtymblpzdxtzygbdhzzrbgxhwnjtjxlkscfsmwlsdqysjtxkzscfwjlbxftzlljzllqblsqmqqcgczfpbphzczjlpyyggdtgwdcfczqyyyqyssclxzsklzzzgffcqnwglhqyzjjczlqzzyjpjzzbpdccmhjgxdqdgdlzqmfgpsytsdyfwwdjzjysxyyczcyhzwpbykxrylybhkjksfxtzjmmckhlltnyymsyxyzpyjqycsycwmtjjkqyrhllqxpsgtlyycljscpxjyzfnmlrgjjtyzbxyzmsjyjhhfzqmsyxrszcwtlrtqzsstkxgqkgsptgcznjsjcqcxhmxggztqydjkzdlbzsxjlhyqgggthqszpyhjhhgyygkggcwjzzylczlxqsftgzslllmljskctbllzzszmmnytpzsxqhjcjyqxyzxzqzcpshkzzysxcdfgmwqrllqxrfztlystctmjcxjjxhjnxtnrztzfqyhqgllgcxszsjdjljcydsjtlnyxhszxcgjzyqpylfhdjsbpcczhjjjqzjqdybssllcmyttmqtbhjqnnygkyrqyqmzgcjkpdcgmyzhqllsllclmholzgdyyfzsljcqzlylzqjeshnylljxgjxlysyyyxnbzljsszcqqcjyllzltjyllzllbnylgqchxyyxoxcxqkyjxxxyklxsxxyqxcykqxqcsgyxxyqxygytqohxhxpyxxxulcyeychzzcbwqbbwjqzscszsslzylkdesjzwmymcytsdsxxscjpqqsqylyyzycmdjdzywcbtjsydjkcyddjlbdjjsodzysyxqqyxdhhgqqyqhdyxwgmmmajdybbbppbcmuupljzsmtxerxjmhqnutpjdcbssmssstkjtssmmtrcplzszmlqdsdmjmqpnqdxcfynbfsdqxyxhyaykqyddlqyyysszbydslntfqtzqpzmchdhczcwfdxtmyqsphqyyxsrgjcwtjtzzqmgwjjtjhtqjbbhwzpxxhyqfxxqywyyhyscdydhhqmnmtmwcpbszppzzglmzfollcfwhmmsjzttdhzzyffytzzgzyskyjxqyjzqbhmbzzlyghgfmshpzfzsnclpbqsnjxzslxxfpmtyjygbxlldlxpzjyzjyhhzcywhjylsjexfszzywxkzjluydtmlymqjpwxyhxsktqjezrpxxzhhmhwqpwqlyjjqjjzszcphjlchhnxjlqwzjhbmzyxbdhhypzlhlhlgfwlchyytlhjxcjmscpxstkpnhqxsrtyxxtesyjctlsslstdlllwwyhdhrjzsfgxtsyczynyhtdhwjslhtzdqdjzxxqhgyltzphcsqfclnjtclzpfstpdynylgmjllycqhysshchylhqyqtmzypbywrfqykqsyslzdqjmpxyyssrhzjnywtqdfzbwwtwwrxcwhgyhxmkmyyyqmsmzhngcepmlqqmtcwctmmpxjpjjhfxyyzsxzhtybmstsyjttqqqyylhynpyqzlcyzhzwsmylkfjxlwgxypjytysyxymzckttwlksmzsylmpwlzwxwqzssaqsyxyrhssntsrapxcpwcmgdxhxzdzyfjhgzttsbjhgyzszysmyclllxbtyxhbbzjkssdmalxhycfygmqypjycqxjllljgslzgqlycjcczotyxmtmttllwtgpxymzmklpszzzxhkqysxctyjzyhxshyxzkxlzwpsqpyhjwpjpwxqqylxsdhmrslzzyzwttcyxyszzshbsccstplwsscjchnlcgchssphylhfhhxjsxyllnylszdhzxylsxlwzykcldyaxzcmddyspjtqjzlnwqpssswctstszlblnxsmnyymjqbqhrzwtyydchqlxkpzwbgqybkfcmzwpzllyylszydwhxpsbcmljbscgbhxlqhyrljxyswxwxzsldfhlslynjlzyflyjycdrjlfsyzfsllcqyqfgjyhyxzlylmstdjcyhbzllnwlxxygyyhsmgdhxxhhlzzjzxczzzcyqzfngwpylcpkpyypmclqkdgxzggwqbdxzzkzfbxxlzxjtpjpttbytszzdwslchzhsltyxhqlhyxxxyyzyswtxzkhlxzxzpyhgchkcfsyhutjrlxfjxptztwhplyxfcrhxshxkyxxyhzqdxqwulhyhmjtbflkhtxcwhjfwjcfpqryqxcyyyqygrpywsgsungwchkzdxyflxxhjjbyzwtsxxncyjjymswzjqrmhxzwfqsylzjzgbhynslbgttcsybyxxwxyhxyyxnsqyxmqywrgyqlxbbzljsylpsytjzyhyzawlrorjmksczjxxxyxchdyxryxxjdtsqfxlyltsffyxlmtyjmjuyyyxltzcsxqzqhzxlyyxzhdnbrxxxjctyhlbrlmbrllaxkyllljlyxxlycrylcjtgjcmtlzllcyzzpzpcyawhjjfybdyyzsmpckzdqyqpbpcjpdcyzmdpbcyydycnnplmtmlrmfmmgwyzbsjgygsmzqqqztxmkqwgxllpjgzbqcdjjjfpkjkcxbljmswmdtqjxldlppbxcwrcqfbfqjczahzgmykphyyhzykndkzmbpjyxpxyhlfpnyygxjdbkxnxhjmzjxstrstldxskzysybzxjlxyslbzyslhxjpfxpqnbylljqkygzmcyzzymccslclhzfwfwyxzmwsxtynxjhpyymcyspmhysmydyshqyzchmjjmzcaagcfjbbhplyzylxxsdjgxdhkxxtxxnbhrmlyjsltxmrhnlxqjxyzllyswqgdlbjhdcgjyqycmhwfmjybmbyjyjwymdpwhxqldygpdfxxbcgjspckrssyzjmslbzzjfljjjlgxzgyxyxlszqyxbexyxhgcxbpldyhwettwwcjmbtxchxyqxllxflyxlljlssfwdpzsmyjclmwytczpchqekcqbwlcqydplqppqzqfjqdjhymmcxtxdrmjwrhxcjzylqxdyynhyyhrslsrsywwzjymtltllgtqcjzyabtckzcjyccqljzqxalmzyhywlwdxzxqdllqshgpjfjljhjabcqzdjgtkhsstcyjlpswzlxzxrwgldlzrlzxtgsllllzlyxxwgdzygbdphzpbrlwsxqbpfdwofmwhlypcbjccldmbzpbzzlcyqxldomzblzwpdwyygdstthcsqsccrsssyslfybfntyjszdfndpdhdzzmbblslcmyffgtjjqwftmtpjwfnlbzcmmjtgbdzlqlpyfhyymjylsdchdzjwjcctljcldtljjcpddsqdsszybndbjlggjzxsxnlycybjxqycbylzcfzppgkcxzdzfztjjfjsjxzbnzyjqttyjyhtyczhymdjxttmpxsplzcdwslshxypzgtfmlcjtycbpmgdkwycyzcdszzyhflyctygwhkjyylsjcxgywjcbllcsnddbtzbsclyzczzssqdllmqyyhfslqllxftyhabxgwnywyypllsdldllbjcyxjzmlhljdxyyqytdlllbugbfdfbbqjzzmdpjhgclgmjjpgaehhbwcqxaxhhhzchxyphjaxhlphjpgpzjqcqzgjjzzuzdmqyybzzphyhybwhazyjhykfgdpfqsdlzmljxkxgalxzdaglmdgxmwzqyxxdxxpfdmmssympfmdmmkxksyzyshdzkxsysmmzzzmsydnzzczxfplstmzdnmxckjmztyymzmzzmsxhhdczjemxxkljstlwlsqlyjzllzjssdppmhnlzjczyhmxxhgzcjmdhxtkgrmxfwmcgmwkdtksxqmmmfzzydkmsclcmpcgmhspxqpzdsslcxkyxtwlwjyahzjgzqmcsnxyymmpmlkjxmhlmlqmxctkzmjqyszjsyszhsyjzjcdajzybsdqjzgwzqqxfkdmsdjlfwehkzqkjpeypzyszcdwyjffmzzylttdzzefmzlbnpplplpepszalltylkckqzkgenqlwagyxydpxlhsxqqwqcqxqclhyxxmlyccwlymqyskgchlcjnszkpyzkcqzqljpdmdzhlasxlbydwqlwdnbqcryddztjybkbwszdxdtnpjdtctqdfxqqmgnxeclttbkpwslctyqlpwyzzklpygzcqqpllkccylpqmzczqcljslqzdjxlddhpzqdljjxzqdxyzqkzljcyqdyjppypqykjyrmpcbymcxkllzllfqpylllmbsglcysslrsysqtmxyxzqzfdzuysyztffmzzsmzqhzssccmlyxwtpzgxzjgzgsjsgkddhtqggzllbjdzlcbchyxyzhzfywxyzymsdbzzyjgtsmtfxqyxqstdgslnxdlryzzlryylxqhtxsrtzngzxbnqqzfmykmzjbzymkbpnlyzpblmcnqyzzzsjzhjctzkhyzzjrdyzhnpxglfztlkgjtctssyllgzrzbbqzzklpklczyssuyxbjfpnjzzxcdwxzyjxzzdjjkggrsrjkmsmzjlsjywqskyhqjsxpjzzzlsnshrnypztwchklpsrzlzxyjqxqkysjycztlqzybbybwzpqdwwyzcytjcjxckcwdkkzxsgkdzxwwyyjqyytcytdllxwkczkklcclzcqqdzlqlcsfqchqhsfsmqzzlnbjjzbsjhtszdysjqjpdlzcdcwjkjzzlpycgmzwdjjbsjqzsyzyhhxjpbjydssxdzncglqmbtsfsbpdzdlznfgfjgfsmpxjqlmblgqcyyxbqkdjjqyrfkztjdhczklbsdzcfjtplljgxhyxzcsszzxstjygkgckgyoqxjplzpbpgtgyjzghzqzzlbjlsqfzgkqqjzgyczbzqtldxrjxbsxxpzxhyzyclwdxjjhxmfdzpfzhqhqmqgkslyhtycgfrzgnqxclpdlbzcsczqlljblhbzcypzzppdymzzsgyhckcpzjgsljlnscdsldlxbmstlddfjmkdjdhzlzxlszqpqpgjllybdszgqlbzlslkyyhzttntjyqtzzpszqztlljtyyllqllqyzqlbdzlslyyzymdfszsnhlxznczqzpbwskrfbsyzmthblgjpmczzlstlxshtcsyzlzblfeqhlxflcjlyljqcbzlzjhhsstbrmhxzhjzclxfnbgxgtqjcztmsfzkjmssnxljkbhsjxntnlzdntlmsjxgzjyjczxyjyjwrwwqnztnfjszpzshzjfyrdjsfszjzbjfzqzzhzlxfysbzqlzsgyftzdcszxzjbqmszkjrhyjzckmjkhchgtxkxqglxpxfxtrtylxjxhdtsjxhjzjxzwzlcqsbtxwxgxtxxhxftsdkfjhzyjfjxrzsdllltqsqqzqwzxsyqtwgwbzcgzllyzbclmqqtzhzxzxljfrmyzflxysqxxjkxrmqdzdmmyybsqbhgzmwfwxgmxlzpyytgzyccdxyzxywgsyjyznbhpzjsqsyxsxrtfyzgrhztxszzthcbfclsyxzlzqmzlmplmxzjxsflbyzmyqhxjsxrxsqzzzsslyfrczjrcrxhhzxqydyhxsjjhzcxzbtynsysxjbqlpxzqpymlxzkyxlxcjlcysxxzzlxdllljjyhzxgyjwkjrwyhcpsgnrzlfzwfzznsxgxflzsxzzzbfcsyjdbrjkrdhhgxjljjtgxjxxstjtjxlyxqfcsgswmsbctlqzzwlzzkxjmltmjyhsddbxgzhdlbmyjfrzfsgclyjbpmlysmsxlszjqqhjzfxgfqfqbpxzgyyqxgztcqwyltlgwsgwhrlfsfgzjmgmgbgtjfsyzzgzyzaflsspmlpflcwbjzcljjmzlpjjlymqdmyyyfbgygyzmlyzdxqyxrqqqhsyyyqxyljtyxfsfsllgnqcyhycwfhcccfxpylypllzyxxxxxkqhhxshjzcfzsczjxcpzwhhhhhapylqalpqafyhxdylukmzqgggddesrnnzltzgchyppysqjjhclljtolnjpzljlhymheydydsqycddhgzundzclzyzllzntnyzgslhslpjjbdgwxpcdutjcklkclwkllcasstkzzdnqnttlyyzssysszzryljqkcqdhhcrxrzydgrgcwcgzqfffppjfzynakrgywyqpqxxfkjtszzxswzddfbbxtbgtzkznpzzpzxzpjszbmqhkcyxyldkljnypkyghgdzjxxeahpnzkztzcmxcxmmjxnkszqnmnlwbwwxjkyhcpstmcsqtzjyxtpctpdtnnpglllzsjlspblplqhdtnjnlyyrszffjfqwdphzdwmrzcclodaxnssnyzrestyjwjyjdbcfxnmwttbylwstszgybljpxglboclhpcbjltmxzljylzxcltpnclckxtpzjswcyxsfyszdkntlbyjcyjllstgqcbxryzxbxklylhzlqzlnzcxwjzljzjncjhxmnzzgjzzxtzjxycyycxxjyyxjjxsssjstssttppgqtcsxwzdcsyfptfbfhfbblzjclzzdbxgcxlqpxkfzflsyltuwbmqjhszbmddbcysccldxycddqlyjjwmqllcsgljjsyfpyyccyltjantjjpwycmmgqyysxdxqmzhszxpftwwzqswqrfkjlzjqqyfbrxjhhfwjjzyqazmyfrhcyybyqwlpexcczstyrlttdmqlykmbbgmyyjprkznpbsxyxbhyzdjdnghpmfsgmwfzmfqmmbcmzzcjjlcnuxyqlmlrygqzcyxzlwjgcjcggmcjnfyzzjhycprrcmtzqzxhfqgtjxccjeaqcrjyhplqlszdjrbcqhqdyrhylyxjsymhzydwldfryhbpydtsscnwbxglpzmlzztqsscpjmxxycsjytycghycjwyrxxlfemwjnmkllswtxhyyyncmmcwjdqdjzglljwjrkhpzggflccsczmcbltbhbqjxqdspdjzzgkglfqywbzyzjltstdhqhctcbchflqmpwdshyytqwcnzzjtlbymbpdyyyxsqkxwyyflxxncwcxypmaelykkjmzzzbrxyyqjfljpfhhhytzzxsgqqmhspgdzqwbwpjhzjdyscqwzktxxsqlzyymysdzgrxckkujlwpysyscsyzlrmlqsyljxbcxtlwdqzpcycykpppnsxfyzjjrcemhszmsxlxglrwgcstlrsxbzgbzgztcplujlslylymtxmtzpalzxpxjtjwtcyyzlblxbzlqmylxpghdslssdmxmbdzzsxwhamlczcpjmcnhjysnsygchskqmzzqdllkablwjxsfmocdxjrrlyqzkjmybyqlyhetfjzfrfksryxfjtwdsxxsysqjyslyxwjhsnlxyyxhbhawhhjzxwmyljcsslkydztxbzsyfdxgxzjkhsxxybssxdpynzwrptqzczenygcxqfjykjbzmljcmqqxuoxslyxxlylljdzbtymhpfsttqqwlhokyblzzalzxqlhzwrrqhlstmypyxjjxmqsjfnbxyxyjxxyqylthylqyfmlkljtmllhszwkzhljmlhljkljstlqxylmbhhlnlzxqjhxcfxxlhyhjjgbyzzkbxscqdjqdsujzyyhzhhmgsxcsymxfebcqwwrbpyyjqtyzcyqyqqzyhmwffhgzfrjfcdpxntqyzpdykhjlfrzxppxzdbbgzqstlgdgylcqmlchhmfywlzyxkjlypqhsywmqqgqzmlzjnsqxjqsyjycbehsxfszpxzwfllbcyyjdytdthwzsfjmqqyjlmqxxlldttkhhybfpwtyysqqwnqwlgwdebzwcmygculkjxtmxmyjsxhybrwfymwfrxyqmxysztzztfykmldhqdxwyynlcryjblpsxcxywlsprrjwxhqyphtydnxhhmmywytzcsqmtssccdalwztcpqpyjllqzyjswxmzzmmylmxclmxczmxmzsqtzppqqblpgxqzhfljjhytjsrxwzxsccdlxtyjdcqjxslqyclzxlzzxmxqrjmhrhzjbhmfljlmlclqnldxzlllpypsyjysxcqqdcmqjzzxhnpnxzmekmxhykyqlxsxtxjyyhwdcwdzhqyybgybcyscfgpsjnzdyzzjzxrzrqjjymcanyrjtldppyzbstjkxxzypfdwfgzzrpymtngxzqbyxnbufnqkrjqzmjegrzgyclkxzdskknsxkcljspjyyzlqqjybzssqlllkjxtbktylccddblsppfylgydtzjyqggkqttfzxbdktyyhybbfytyybclpdytgdhryrnjsptcsnyjqhklllzslydxxwbcjqspxbpjzjcjdzffxxbrmlazhcsndlbjdszblprztswsbxbcllxxlzdjzsjpylyxxyftfffbhjjxgbyxjpmmmpssjzjmtlyzjxswxtyledqpjmygqzjgdjlqjwjqllsjgjgygmscljjxdtygjqjqjcjzcjgdzzsxqgsjggcxhqxsnqlzzbxhsgzxcxyljxyxyydfqqjhjfxdhctxjyrxysqtjxyefyyssyyjxncyzxfxmsyszxyyschshxzzzgzzzgfjdltylnpzgyjyzyyqzpbxqbdztzczyxxyhhsqxshdhgqhjhgywsztmzmlhyxgebtylzkqwytjzrclekystdbcykqqsayxcjxwwgsbhjyzydhcsjkqcxswxfltynyzpzcczjqtzwjqdzzzqzljjxlsbhpyxxpsxshheztxfptlqyzzxhytxncfzyyhxgnxmywxtzsjpthhgymxmxqzxtsbczyjyxxtyyzypcqlmmszmjzzllzxgxzaajzyxjmzxwdxzsxzdzxleyjjzqbhzwzzzqtzpsxztdsxjjjznyazphxyysrnqdthzhyykyjhdzxzlswclybzyecwcycrylcxnhzydzydyjdfrjjhtrsqtxyxjrjhojynxelxsfsfjzghpzsxzszdzcqzbyyklsgsjhczshdgqgxyzgxchxzjwyqwgyhksseqzzndzfkwysstclzstsymcdhjxxyweyxczaydmpxmdsxybsqmjmzjmtzqlpjyqzcgqhxjhhlxxhlhdldjqcldwbsxfzzyyschtytyybhecxhykgjpxhhyzjfxhwhbdzfyzbcapnpgnydmsxhmmmmamynbyjtmpxyymcthjbzyfcgtyhwphftwzzezsbzegpfmtskftycmhfllhgpzjxzjgzjyxzsbbqsczzlzccstpgxmjsftcczjzdjxcybzlfcjsyzfgszlybcwzzbyzdzypswyjzxzbdsyuxlzzbzfygczxbzhzftpbgzgejbstgkdmfhyzzjhzllzzgjqzlsfdjsscbzgpdlfzfzszyzyzsygcxsnxxchczxtzzljfzgqsqyxzjqdccztqcdxzjyqjqchxztdlgscxzsyqjqtzwlqdqztqchqqjzyezzzpbwkdjfcjpztypqyqttynlmbdktjzpqzqzzfpzsbnjlgyjdxjdzzkzgqkxdlpzjtcjdqbxdjqjstcknxbxzmslyjcqmtjqwwcjqnjnlllhjcwqtbzqydzczpzzdzyddcyzzzccjttjfzdprrtztjdcqtqzdtjnplzbcllctzsxkjzqzpzlbzrbtjdcxfczdbccjjltqqpldcgzdbbzjcqdcjwynllzyzccdwllxwzlxrxntqqczxkqlsgdfqtddglrlajjtkuymkqlltzytdyyczgjwyxdxfrskstqtenqmrkqzhhqkdldazfkypbggpzrebzzykzzspegjxgykqzzzslysyyyzwfqzylzzlzhwchkypqgnpgblplrrjyxccsyyhsfzfybzyytgzxylxczwxxzjzblfflgskhyjzeyjhlpllllczgxdrzelrhgklzzyhzlyqszzjzqljzflnbhgwlczcfjyspyxzlzlxgccpzbllcybbbbubbcbpcrnnzczyrbfsrldcgqyyqxygmqzwtzytyjxyfwtehzzjywlccntzyjjzdedpzdztsyqjhdymbjnyjzlxtsstphndjxxbyxqtzqddtjtdyytgwscszqflshlglbczphdlyzjyckwtytylbnytsdsycctyszyyebhexhqdtwnygyclxtszystqmygzazccszzdslzclzrqxyyeljsbymxsxztembbllyyllytdqyshymrqwkfkbfxnxsbychxbwjyhtqbpbsbwdzylkgzskyhxqzjxhxjxgnljkzlyycdxlfyfghljgjybxqlybxqpqgztzplncypxdjyqydymrbesjyyhkxxstmxrczzywxyqybmcllyzhqyzwqxdbxbzwzmslpdmyskfmzklzcyqyczlqxfzzydqzpzygyjyzmzxdzfyfyttqtzhgspczmlccytzxjcytjmkslpzhysnzllytpzctzzcktxdhxxtqcyfksmqccyyazhtjpcylzlyjbjxtpnyljyynrxsylmmnxjsmybcsysylzylxjjqyldzlpqbfzzblfndxqkczfywhgqmrdsxycytxnqqjzyypfzxdyzfprxejdgyqbxrcnfyyqpghyjdyzxgrhtkylnwdzntsmpklbthbpyszbztjzszzjtyyxzphsszzbzczptqfzmyflypybbjqxzmxxdjmtsyskkbjzxhjcklpsmkyjzcxtmljyxrzzqslxxqpyzxmkyxxxjcljprmyygadyskqlsndhyzkqxzyztcghztlmlwzybwsyctbhjhjfcwztxwytkzlxqshlyjzjxtmplpycgltbzztlzjcyjgdtclklpllqpjmzpapxyzlkktkdzczzbnzdydyqzjyjgmctxltgxszlmlhbglkfwnwzhdxuhlfmkyslgxdtwwfrjejztzhydxykshwfzcqshktmqqhtzhymjdjskhxzjzbzzxympagqmstpxlsklzynwrtsqlszbpspsgzwyhtlkssswhzzlyytnxjgmjszsufwnlsoztxgxlsammlbwldszylakqcqctmycfjbslxclzzclxxksbzqclhjpsqplsxxckslnhpsfqqytxyjzlqldxzqjzdyydjnzptuzdskjfsljhylzsqzlbtxydgtqfdbyazxdzhzjnhhqbyknxjjqczmlljzkspldyclbblxklelxjlbqycxjxgcnlcqplzlzyjtzljgyzdzpltqcsxfdmnycxgbtjdcznbgbqyqjwgkfhtnpyqzqgbkpbbyzmtjdytblsqmpsxtbnpdxklemyycjynzctldykzzxddxhqshdgmzsjycctayrzlpyltlkxslzcggexclfxlkjrtlqjaqzncmbydkkcxglczjzxjhptdjjmzqykqsecqzdshhadmlzfmmzbgntjnnlgbyjbrbtmlbyjdzxlcjlpldlpcqdhlxzlycblcxzzjadjlnzmmsssmybhbsqkbhrsxxjmxsdznzpxlgbrhwggfcxgmsklltsjyycqltskywyyhywxbxqywpywykqlsqptntkhqcwdqktwpxxhcpthtwumssyhbwcrwxhjmkmzngwtmlkfghkjylsyycxwhyeclqhkqhttqkhfzldxqwyzyydesbpkyrzpjfyyzjceqdzzdlatzbbfjllcxdlmjssxegygsjqxcwbxsszpdyzcxdnyxppzydlyjczpltxlsxyzyrxcyyydylwwnzsahjsyqyhgywwaxtjzdaxysrltdpssyyfnejdxyzhlxlllzqzsjnyqyqqxyjghzgzcyjchzlycdshwshjzyjxcllnxzjjyyxnfxmwfpylcyllabwddhwdxjmcxztzpmlqzhsfhzynztlldywlslxhymmylmbwwkyxyadtxylldjpybpwuxjmwmllsafdllyflbhhhbqqltzjcqjldjtffkmmmbythygdcqrddwrqjxnbysnwzdbyytbjhpybyttjxaahgqdqtmystqxkbtzpkjlzrbeqqssmjjbdjotgtbxpgbktlhqxjjjcthxqdwjlwrfwqgwshckryswgftgygbxsdwdwrfhwytjjxxxjyzyslpyyypayxhydqkxshxyxgskqhywfdddpplcjlqqeewxksyykdypltjthkjltcyyhhjttpltzzcdlthqkzxqysteeywyyzyxxyysttjkllpzmcyhqgxyhsrmbxpllnqydqhxsxxwgdqbshyllpjjjthyjkyppthyyktyezyenmdshlcrpqfdgfxzpsftljxxjbswyysksflxlpplbbblbsfxfyzbsjssylpbbffffsscjdstzsxzryysyffsyzyzbjtbctsbsdhrtjjbytcxyjeylxcbnebjdsyxykgsjzbxbytfzwgenyhhthzhhxfwgcstbgxklsxywmtmbyxjstzscdyqrcytwxzfhmymcxlznsdjtttxrycfyjsbsdyerxjljxbbdeynjghxgckgscymblxjmsznskgxfbnbpthfjaafxyxfpxmypqdtzcxzzpxrsywzdlybbktyqpqjpzypzjznjpzjlzzfysbttslmptzrtdxqsjehbzylzdhljsqmlhtxtjecxslzzspktlzkqqyfsygywpcpqfhqhytqxzkrsgttsqczlptxcdyyzxsqzslxlzmycpcqbzyxhbsxlzdltcdxtylzjyyzpzyzltxjsjxhlpmytxcqrblzssfjzztnjytxmyjhlhpplcyxqjqqkzzscpzkswalqsblcczjsxgwwwygyktjbbztdkhxhkgtgpbkqyslpxpjckbmllxdzstbklggqkqlsbkktfxrmdkbftpzfrtbbrferqgxyjpzsstlbztpszqzsjdhljqlzbpmsmmsxlqqnhknblrddnxxdhddjcyygylxgzlxsygmqqgkhbpmxyxlytqwlwgcpbmqxcyzydrjbhtdjyhqshtmjsbyplwhlzffnypmhxxhpltbqpfbjwqdbygpnztpfzjgsddtqshzeawzzylltyybwjkxxghlfkxdjtmszsqynzggswqsphtlsskmclzxyszqzxncjdqgzdlfnykljcjllzlmzznhydsshthzzlzzbbhqzwwycrzhlyqqjbeyfxxxwhsrxwqhwpslmsskzttygyqqwrslalhmjtqjsmxqbjjzjxzyzkxbyqxbjxshztsfjlxmxzxfghkzszggylclsarjyhslllmzxelglxydjytlfbhbpnlyzfbbhptgjkwetzhkjjxzxxglljlstgshjjyqlqzfkcgnndjsszfdbctwwseqfhqjbsaqtgypqlbxbmmywxgslzhglzgqyflzbyfzjfrysfmbyzhqgfwzsyfyjjphzbyyzffwodgrlmftwlbzgycqxcdjygzyyyytytydwegazyhxjlzyyhlrmgrxxzclhneljjtjtpwjybjjbxjjtjteekhwsljplpsfyzpqqbdlqjjtyyqlyzkdksqjyyqzldqtgjqyzjsucmryqthtejmfctyhypkmhyzwjdqfhyyxwshctxrljhqxhccyyyjltkttytmxgtcjtzayyoczlylbszywjytsjyhbyshfjlygjxxtmzyyltxxypzlxyjzyzyypnhmymdyylblhlsyyqqllnjjymsoyqbzgdlyxylcqyxtszegxhzglhwbljheyxtwqmakbpqcgyshhegqcmwyywljyjhyyzlljjylhzyhmgsljljxcjjyclycjpcpzjzjmmylcqlnqljqjsxyjmlszljqlycmmhcfmmfpqqmfylqmcffqmmmmhmznfhhjgtthhkhslnchhyqdxtmmqdcyzyxyqmyqyltdcyyyzazzcymzydlzfffmmycqzwzzmabtbyztdmnzzggdftypcgqyttssffwfdtzqssystwxjhxytsxxylbyqhwwkxhzxwznnzzjzjjqjccchyyxbzxzcyztllcqxynjycyycynzzqyyyewyczdcjycchyjlbtzyycqwmpwpymlgkdldlgkqqbgychjxy";
//此处收录了375个多音字,数据来自于http://www.51window.net/page/pinyin
var omultidiff={"19969":"dz","19975":"wm","19988":"qj","20048":"yl","20056":"sc","20060":"nm","20094":"qg","20127":"qj","20167":"qc","20193":"yg","20250":"kh","20256":"zc","20282":"sc","20285":"qjg","20291":"td","20314":"yd","20340":"ne","20375":"td","20389":"yj","20391":"cz","20415":"pb","20446":"ys","20447":"sq","20504":"tc","20608":"kg","20854":"qj","20857":"zc","20911":"pf","20504":"tc","20608":"kg","20854":"qj","20857":"zc","20911":"pf","20985":"aw","21032":"pb","21048":"xq","21049":"sc","21089":"ys","21119":"jc","21242":"sb","21273":"sc","21305":"yp","21306":"qo","21330":"zc","21333":"sdc","21345":"qk","21378":"ca","21397":"sc","21414":"xs","21442":"sc","21477":"jg","21480":"td","21484":"zs","21494":"yx","21505":"yx","21512":"hg","21523":"xh","21537":"pb","21542":"pf","21549":"kh","21571":"e","21574":"da","21588":"td","21589":"o","21618":"zc","21621":"kha","21632":"zj","21654":"kg","21679":"lkg","21683":"kh","21710":"a","21719":"yh","21734":"woe","21769":"a","21780":"wn","21804":"xh","21834":"a","21899":"zd","21903":"rn","21908":"wo","21939":"zc","21956":"sa","21964":"ya","21970":"td","22003":"a","22031":"jg","22040":"xs","22060":"zc","22066":"zc","22079":"mh","22129":"xj","22179":"xa","22237":"nj","22244":"td","22280":"jq","22300":"yh","22313":"xw","22331":"yq","22343":"yj","22351":"ph","22395":"dc","22412":"td","22484":"pb","22500":"pb","22534":"zd","22549":"dh","22561":"pb","22612":"td","22771":"kq","22831":"hb","22841":"jg","22855":"qj","22865":"xq","23013":"ml","23081":"wm","23487":"sx","23558":"qj","23561":"yw","23586":"yw","23614":"yw","23615":"sn","23631":"pb","23646":"zs","23663":"zt","23673":"yg","23762":"td","23769":"zs","23780":"qj","23884":"qk","24055":"xh","24113":"dc","24162":"zc","24191":"ga","24273":"qj","24324":"nl","24377":"td","24378":"qj","24439":"pf","24554":"zs","24683":"td","24694":"we","24733":"lk","24925":"tn","25094":"zg","25100":"xq","25103":"xh","25153":"pb","25170":"pb","25179":"kg","25203":"pb","25240":"zs","25282":"fb","25303":"na","25324":"kg","25341":"zy","25373":"wz","25375":"xj","25384":"a","25457":"a","25528":"sd","25530":"sc","25552":"td","25774":"zc","25874":"zc","26044":"yw","26080":"wm","26292":"pb","26333":"pb","26355":"zy","26366":"cz","26397":"zc","26399":"qj","26415":"zs","26451":"sb","26526":"zc","26552":"jg","26561":"td","26588":"jg","26597":"cz","26629":"zs","26638":"yl","26646":"xq","26653":"kg","26657":"xj","26727":"hg","26894":"zc","26937":"zs","26946":"zc","26999":"kj","27099":"kj","27449":"yq","27481":"xs","27542":"zs","27663":"zs","27748":"ts","27784":"sc","27788":"zd","27795":"td","27812":"o","27850":"pb","27852":"mb","27895":"sl","27898":"pl","27973":"qj","27981":"kh","27986":"hx","27994":"xj","28044":"yc","28065":"wg","28177":"sm","28267":"qj","28291":"kh","28337":"zq","28463":"tl","28548":"dc","28601":"td","28689":"pb","28805":"jg","28820":"qg","28846":"pb","28952":"td","28975":"zc","29100":"a","29325":"qj","29575":"sl","29602":"fb","30010":"td","30044":"cx","30058":"pf","30091":"ysp","30111":"yn","30229":"xj","30427":"sc","30465":"sx","30631":"yq","30655":"qj","30684":"qjg","30707":"sd","30729":"xh","30796":"lg","30917":"pb","31074":"nm","31085":"jz","31109":"sc","31181":"zc","31192":"mlb","31293":"jq","31400":"yx","31584":"yj","31896":"zn","31909":"zy","31995":"xj","32321":"pf","32327":"zy","32418":"hg","32420":"xq","32421":"hg","32438":"lg","32473":"gj","32488":"td","32521":"qj","32527":"pb","32562":"zsq","32564":"jz","32735":"zd","32793":"pb","33071":"pf","33098":"xl","33100":"ya","33152":"pb","33261":"cx","33324":"bp","33333":"td","33406":"ya","33426":"wm","33432":"pb","33445":"jg","33486":"zn","33493":"ts","33507":"qj","33540":"qj","33544":"zc","33564":"xq","33617":"yt","33632":"qj","33636":"xh","33637":"yx","33694":"wg","33705":"pf","33728":"yw","33882":"sr","34067":"wm","34074":"yw","34121":"qj","34255":"zc","34259":"xl","34425":"jh","34430":"xh","34485":"kh","34503":"ys","34532":"hg","34552":"xs","34558":"ye","34593":"zl","34660":"yq","34892":"xh","34928":"sc","34999":"qj","35048":"pb","35059":"sc","35098":"zc","35203":"tq","35265":"jx","35299":"jx","35782":"sz","35828":"ys","35830":"e","35843":"td","35895":"yg","35977":"mh","36158":"jg","36228":"qj","36426":"xq","36466":"dc","36710":"jc","36711":"zyg","36767":"pb","36866":"sk","36951":"yw","37034":"yx","37063":"xh","37218":"zc","37325":"zc","38063":"pb","38079":"td","38085":"qy","38107":"dc","38116":"td","38123":"yd","38224":"hg","38241":"xtc","38271":"zc","38415":"ye","38426":"kh","38461":"yd","38463":"ae","38466":"pb","38477":"xj","38518":"yt","38551":"wk","38585":"zc","38704":"xs","38739":"lj","38761":"gj","38808":"sq","39048":"jg","39049":"xj","39052":"hg","39076":"cz","39271":"xt","39534":"td","39552":"td","39584":"pb","39647":"sb","39730":"lg","39748":"tpb","40109":"zq","40479":"nd","40516":"hg","40536":"hg","40583":"qj","40765":"yq","40784":"qj","40840":"yk","40863":"qjg"};
//参数,中文字符串
//返回值:拼音首字母串数组
function makepy(str){
if(typeof(str) != "string")
throw new error(-1,"函数makepy需要字符串类型参数!");
var arrresult = new array(); //保存中间结果的数组
for(var i=0,len=str.length;i<len;i++){
//获得unicode码
var ch = str.charat(i);
//检查该unicode码是否在处理范围之内,在则返回该码对映汉字的拼音首字母,不在则调用其它函数处理
arrresult.push(checkch(ch));
}
//处理arrresult,返回所有可能的拼音首字母串数组
return mkrslt(arrresult);
}
function checkch(ch){
var uni = ch.charcodeat(0);
//如果不在汉字处理范围之内,返回原字符,也可以调用自己的处理函数
if(uni > 40869 || uni < 19968)
return ch; //dealwithothers(ch);
//检查是否是多音字,是按多音字处理,不是就直接在strchinesefirstpy字符串中找对应的首字母
return (omultidiff[uni]?omultidiff[uni]:(strchinesefirstpy.charat(uni-19968)));
}
function mkrslt(arr){
var arrrslt = [""];
for(var i=0,len=arr.length;i<len;i++){
var str = arr[i];
var strlen = str.length;
if(strlen == 1){
for(var k=0;k<arrrslt.length;k++){
arrrslt[k] += str;
}
}else{
var tmparr = arrrslt.slice(0);
arrrslt = [];
for(k=0;k<strlen;k++){
//复制一个相同的arrrslt
var tmp = tmparr.slice(0);
//把当前字符str[k]添加到每个元素末尾
for(var j=0;j<tmp.length;j++){
tmp[j] += str.charat(k);
}
//把复制并修改后的数组连接到arrrslt上
arrrslt = arrrslt.concat(tmp);
}
}
}
return arrrslt;
}
//两端去空格函数
string.prototype.trim = function() { return this.replace(/(^\s*)|(\s*$)/g,""); };
//
function getposition(obj) {
var top=0;
var left=0;
var width=obj.offsetwidth;
var height=obj.offsetheight;
while (obj.offsetparent) {
top += obj.offsettop;
left += obj.offsetleft;
obj = obj.offsetparent;
}
return {"top":top,"left":left,"width":width,"height":height};
}
function getcityfirst(city){
if(city == '')
return '#';
var str = city.substring(0,1);
//多音字处理
if(str == '长')
return 'c';
else if(str == '佛')
return 'f';
else if(str == '乐')
return 'l';
else if(str == '重')
return 'c';
var arrrslt = makepy(str);
return arrrslt[0];
}
</script>
<script>
//$("#data").html('');
//有序无重复字母列表
var sort_first_zm = [];//（城市首字母变量）
var j = 0;//城市首字母变量索引
var seachindex = 0;//用来存放搜索的索引，当前查找到第几个
//添加无重复首字母，用于字母索引，传入参数：城市名
function addfirstzm(city){
var ishave = false;
var first = getcityfirst(city);
for(var i = 0; i < sort_first_zm.length;i++){
if(sort_first_zm[i] == first){
ishave = true;
break;
}
}
if(!ishave){
sort_first_zm[j] = first;
j++;
}
}
//seachinput文本框值改变事件
var scurtext;
var flag = 0;
//查找指定文本
function findtextinbody(){
//去除所有高亮显示的样式
$(".highlight").removeclass("highlight");
$("[name=highlight]").attr("name","");
//查找匹配
var searchtext = $('#seachinput').val();//获取你输入的关键字；
if(searchtext == '')
return;
var index = $.trim($('#seachinput').val().tostring());//去掉两头空格
//选择包含文本框值的所有加上focus类样式，并把它（们）移到ul的最前面
//console.log($("td:contains('" + index + "')"));
var regexp = new regexp(searchtext, 'g');//创建正则表达式，g表示全局的，如果不用g， 则查找到第一个就不会继续向下查找了；
var content = $("#data").text();
if (!regexp.test(content)) {
createtips('没有该城市');
//showtips("没有搜索到该城市",_searchtop,3,_searchleft);
return;
} else {
if (scurtext != searchtext) {
i = 0;
scurtext = searchtext;
}
}
//高亮显示
$('#data').find('td').each(function(){
var html = $(this).html();
//将找到的关键字替换，加上highlight属性；
if(html.indexof(searchtext) > -1){
$(this).find('span').addclass("highlight");
$(this).find('span').attr("name","highlight");
flag = 1;
}
/**
var newhtml = html.replace(regexp, '<span class="highlight">'+searchtext+'</span>');
$(this).html(newhtml);//更新；
*/
});
seachindex = 0;
console.log('总共查找到: ' + $(".highlight").size());
}
//文本框值改变后重置掉搜索按钮,并进行一次搜索和定位
$("#seachinput").keyup(function (){
$("#seachbutton").text('查找');
findtextinbody();
});
//搜索按钮被点击
//$('#seachinput').keyup(function(){
$("#seachbutton").click(function(){
if($(this).text() == '查找')
findtextinbody();
findnextstring();
});
function findnextstring(){
if(seachindex >= $(".highlight").size())
seachindex = 0;
if ($(".highlight").size() >= 1) {
console.log('开始查找第 ' + seachindex + " 个");
$("#seachbutton").text("下一个");
console.log($(".highlight").eq(seachindex));
//js滚动到页面指定位置定位方法
//document.getelementsbyname("highlight")[seachindex].scrollintoview();
//获取查找文本框按钮以及高度
var _top = $("#folat_top_p").height();
//设置查找当前索引的符合文本的显示文职
//$(".highlight").eq(seachindex).offset({ top: _top + 10});
//console.log($.scrollto($(".highlight"),$(".highlight").eq(seachindex).offset().top));
//jquery滚动到页面指定位置定位方法
$("html,body").animate({scrolltop: $(".highlight").eq(seachindex).offset().top - ($(window).height() * 0.07 + 20)},1);
}else{
$("#seachbutton").text("查找");
}
seachindex++;
}
//搜索无结果提示
var tipsp = '<p class="tipsclass"></p>';
$( 'body' ).append( tipsp );
function showtips( tips, height, time,left ){
var windowwidth = document.documentelement.clientwidth;
$('.tipsclass').text(tips);
$( 'p.tipsclass' ).css({
'top' : height + 'px',
'left' :left + 'px',
'position' : 'absolute',
'padding' : '8px 6px',
'background': '#000000',
'font-size' : 14 + 'px',
'font-weight': 900,
'margin' : '0 auto',
'text-align': 'center',
'width' : 'auto',
'color' : '#fff',
'border-radius':'2px',
'opacity' : '0.8' ,
'box-shadow':'0px 0px 10px #000',
'-moz-box-shadow':'0px 0px 10px #000',
'-webkit-box-shadow':'0px 0px 10px #000'
}).show();
settimeout( function(){$( 'p.tipsclass' ).fadeout();}, ( time * 1000 ) );
}
//定位字母位置
function dingweibyzm(zm){
var _top = $("#folat_top_p").height();
createtips(zm);
$("html,body").animate({scrolltop: $("span[name='" + zm + "']").offset().top - ($(window).height() * 0.07 + 20)},1);
}
//城市和字母索引列表展示
//参数，循环添加数据方法
function showcitytable(method){
//开始进行有序显示
for ( var zm in sort_first_zm) {
var now_zm = sort_first_zm[zm];
var show_zm = sort_first_zm[zm];
//为字母列表赋值
/**
原始js定位
var float_text = "<span name='showzmspan_c' style='width:25%;' onclick=\"document.getelementsbyname(\'";
//var float_text = "<a href='#";
if(now_zm == '')
now_zm = "#";
float_text += now_zm + "\')[0].scrollintoview()\">" + now_zm;
*/
var float_text = "<span name='showzmspan_c' style='width:25%;' onclick=\"dingweibyzm(\'";
//var float_text = "<a href='#";
if(now_zm == '')
now_zm = "#";
float_text += now_zm + "\')\">" + now_zm;
float_text += "</span>";
var insert_float = document.getelementbyid("float_table").insertrow(document.getelementbyid("float_table").rows.length);
var colzm = insert_float.insertcell(0);
float_text = now_zm;
colzm.innerhtml = float_text;
//漂浮字母导航td点击事件
colzm.onclick = function (){
var cli = $(this).html().trim();
dingweibyzm(cli);
//document.getelementsbyname(cli)[0].scrollintoview();
};
//insert_float.insertcell(0).innerhtml = float_text;
//为城市列表赋值
var text = "<span name='" + now_zm + "'>" + now_zm + "</span>";
var insert = document.getelementbyid("data").insertrow(document.getelementbyid("data").rows.length);
insert.insertcell(0).innerhtml = text;
method(show_zm);
}
}
//将城市添加到列表中，以及添加事件
//参数：城市value（值）,城市名,当前展示的字母
function addhtmltotable(city_code,city_desc,show_zm){
if(show_zm == getcityfirst(city_desc)){
var insert = document.getelementbyid("data").insertrow(document.getelementbyid("data").rows.length);
var coll = insert.insertcell(0);
coll.innerhtml = '<span onclick="gotolast(' + city_code +',\'' + city_desc + '\');">' +
city_desc + '</span>';
coll.onclick = function (){gotolast(city_code,city_desc);};
//insert.insertcell(1).innerhtml = '字母 ${li.city_first_zm}';
}
}
//如果是社保和公积金
if('${type}' == 'social' || '${type}' == 'provident'){
<c:foreach var="t" items="${belonglist}">
addfirstzm('${t.city_desc}');
</c:foreach>
//排序赋值
sort_first_zm = sort_first_zm.sort();
//fruits.sort();
//fruits.reverse();
//console.log(document.getelementbyid("data"));
showcitytable(function data(show_zm){
<c:foreach var="li" items="${belonglist}">
//console.log('${li.city_desc}');
addhtmltotable('${li.city_code}','${li.city_desc}',show_zm);
</c:foreach>
});
}
/**
for(var i = 0; i < '${belonglist.size()}';i++){
console.log(i);
var da = '${belonglist.size()}';
sort_first_zm[i] =
}
$("#data");
*/
$("span[name='showzmspan_c']").each(function (){
$(this).click(function (t){
console.log($(this));
//$("#showzmspan").css("top","45%");
$("#showzmspan").css("display","");
});
});
function gotolast(code,city){
var lasturl = document.getelementbyid("lasturl").value;
if(lasturl == '')
lasturl = document.location.href;
while(lasturl.indexof('&undefined&') > -1 || lasturl.indexof(' ') > -1
|| lasturl.indexof('city_code') > -1 || lasturl.indexof('city') > -1
|| lasturl.indexof(' ') > -1){
if(lasturl.indexof('city_code') > -1){
var top = lasturl.split('city_code')[0];
var next = lasturl.split('city_code')[1].split("&")[1];
lasturl = top + next;
}
if(lasturl.indexof('&undefined&') > -1){
lasturl = lasturl.replace("&undefined&","");
}
/**
if(lasturl.indexof('undefined') > -1){
lasturl = lasturl.replace("undefined","");
}
*/
if(lasturl.indexof(' ') > -1){
lasturl = lasturl.replace(" ","");
}
if(lasturl.indexof('city') > -1){
var top = lasturl.split('city')[0];
var next = lasturl.split('city')[1].split("&")[1];
lasturl = top + next;
}
}
while(lasturl.indexof('undefined') > -1){
lasturl = lasturl.replace("undefined","");
}
while(lasturl.indexof('&&') > -1){
lasturl = lasturl.replace("&&","&");
}
window.location.href = lasturl + "&city_code=" + code + "&city=" + city;
}
/*提示框*/
function createtips(msg){
var $tips = $('#formtips'),
top = $(window).height() / 2;
if($tips.length == 0){
$tips = $('<p class="formtips" id="formtips"><span></span></p>');
$('body').append($tips);
$tips.find('span').html(msg);
$tips.css('top',top)
.addclass('fade');
}else{
$tips.removeclass('fade')
.find('span')
.html(msg);
$tips.css('top', top)
.show()
.addclass('fade');
}
}
</script>
</html>
相关推荐：
jquery实现导航栏头部菜单项点击后变换颜色的方法实例详解
javascript实现个性导航栏特效
实例分享jquery动态添加.active 实现导航效果代码
以上就是js带导航城市列表以及输入搜索功能的实现的详细内容。