jquery仿携程网城市选择插件

最新推荐文章于 2022-03-31 12:06:15 发布

iteye_6481

最新推荐文章于 2022-03-31 12:06:15 发布

阅读量719

点赞数

文章标签： xhtml javascript ViewUI

效果-------

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript' src='citylist.js'></script>
<script type='text/javascript' src='querycity.js'></script>
<link href='cityquery.css' rel="stylesheet" type="text/css" />
<title>城市搜索</title>
</head>
<script type="text/javascript">
var labelFromcity = new Array();
labelFromcity ['热门城市'] = new Array(0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40);
labelFromcity ['A-F'] = new Array(0,3,4,5,6,28,29);
labelFromcity ['G-J'] = new Array(1,7,8,9,30,31,32,33,37,40);
labelFromcity ['K-N'] = new Array(10,11,12,34,35,38);
labelFromcity ['P-W'] = new Array(13,14,15,16,17,18,22,24,25,36);
labelFromcity ['X-Z'] = new Array(2,19,20,21,26,27,39);
labelFromcity ['国际城市'] = new Array(41,42,43,44,45,46,47,48,49);
var hotList = new Array(14,15,16,17,18,19);

$(document).ready(function(){
$('#fromcity').querycity({'data':citysFlight,'tabs':labelFromcity,'hotList':hotList});
$('#tocity').querycity({'data':citysFlightTo});
});
</script>
<body>
<div style='margin:100px auto;width:900px' >
<input id='fromcity' type='text' value='' />
<input id='tocity' type='text' value='' /><br />
<select>
<option>看你能否挡住我犀利的眼神</option>
<option>看你能否挡住我犀利的眼神</option>
<option>看你能否挡住我犀利的眼神</option>
<option>看你能否挡住我犀利的眼神</option>
<option>看你能否挡住我犀利的眼神</option>
<option>看你能否挡住我犀利的眼神</option>
</select>
</div>
</html>

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Jquery（以前是JS代码，修改了部分BUG兼容性更好并美化了些效果）-----querycity.js

input.blur(function(){
if( t_suggest_focus == false ){
if($(this).val()==''){
$(this).val( suggestMain.find('.list_city_container a.selected').children('b').text());
}
suggestMain.hide();
}
}).keydown(function(event){
popMain.hide();
event = window.event || event;
var keyCode = event.keyCode || event.which || event.charCode;
if (keyCode == 37) {//左
prevPage();
} else if (keyCode == 39) {//右
nextPage();
}else if(keyCode == 38){//上
prevResult();
}else if(keyCode == 40){//下
nextResult();
}
}).keypress(function(event){
event = window.event || event;
var keyCode = event.keyCode || event.which || event.charCode;
if(13 == keyCode){
if(suggestMain.find('.list_city_container a.selected').length > 0){
input.val(suggestMain.find('.list_city_container a.selected').children('b').text());
suggestMain.hide();
}
}
}).keyup(function(event){
event = window.event || event;
var keyCode = event.keyCode || event.which || event.charCode;
if(keyCode != 13 && keyCode != 37 && keyCode != 39 && keyCode !=9 && keyCode !=38 && keyCode !=40 ){
//keyCode == 9是tab切换键
queryCity();
}
});

suggestMain.find('.list_city_container a').live('click',function(){
input.val($(this).children('b').text());
suggestMain.hide();
}).live('mouseover',function(){
t_suggest_focus = true;
}).live('mouseout',function(){
t_suggest_focus = false;
});
suggestMain.find('.page_break a').live('mouseover',function(){
t_suggest_focus = true;
}).live('mouseout',function(){
t_suggest_focus = false;
});
suggestMain.find('.page_break a').live('click',function(event){
t_suggest_page_click = true;
input.click();
if($(this).attr('inum') != null){
setAddPage($(this).attr('inum'));
}
});

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

其中在另一个文件中做一个数组JS存储地市名-----citylist.js

//初始化各个城市
var citysFlight=new Array();
citysFlight[0]=new Array('pek','北京','beijing','bj');
citysFlight[1]=new Array('can','广州','guangzhou','gz');
citysFlight[2]=new Array('szx','深圳','shenzhen','sz');
citysFlight[3]=new Array('csx','长沙','changsha','cs');
citysFlight[4]=new Array('ctu','成都','chengdu','cd');
citysFlight[5]=new Array('ckg','重庆','chongqing','cq');
citysFlight[6]=new Array('foc','福州','fuzhou','fz');
citysFlight[7]=new Array('kwe','贵阳','guiyang','gy');
citysFlight[8]=new Array('hak','海口','haikou','hk');
citysFlight[9]=new Array('hgh','杭州','hangzhou','hz');
citysFlight[10]=new Array('kmg','昆明','kunming','km');
citysFlight[11]=new Array('khn','南昌','nanchang','nc');
citysFlight[12]=new Array('nkg','南京','nanjing','nj');
citysFlight[13]=new Array('syx','三亚','sanya','sy');
citysFlight[14]=new Array('sha','上海虹桥','shanghaihongqiao','shhq');
citysFlight[15]=new Array('pvg','上海浦东','shanghaipudong','shpd');
citysFlight[16]=new Array('she','沈阳','shenyang','sy');
citysFlight[17]=new Array('wnz','温州','wenzhou','wz');
citysFlight[18]=new Array('wuh','武汉','wuhan','wh');
citysFlight[19]=new Array('xmn','厦门','xiamen','xm');
citysFlight[20]=new Array('sia','西安','xian','xa');
citysFlight[21]=new Array('cgo','郑州','zhengzhou','zz');
citysFlight[22]=new Array('swa','汕头','sangtou','st');
citysFlight[23]=new Array('tyn','太原','taiyuan','ty');
citysFlight[24]=new Array('tsn','天津','tianjin','tj');
citysFlight[25]=new Array('urc','乌鲁木齐','wulumuqi','wlmq');
citysFlight[26]=new Array('yiw','义乌','yiwu','yw');
citysFlight[27]=new Array('zha','湛江','zhanjiang','zj');
citysFlight[28]=new Array('cgo','长春','changchun','cc');
citysFlight[29]=new Array('dlc','大连','dalian','dl');
citysFlight[30]=new Array('kwl','桂林','guilin','gl');
citysFlight[31]=new Array('hrb','哈尔滨','haerbin','heb');
citysFlight[32]=new Array('hfe','合肥','hefei','hf');
citysFlight[33]=new Array('tna','济南','jinan','jn');
citysFlight[34]=new Array('nng','南宁','nanning','nn');
citysFlight[35]=new Array('ngb','宁波','ningbo','nb');
citysFlight[36]=new Array('tao','青岛','qingdao','qd');
citysFlight[37]=new Array('jmu','佳木斯','jiamusi','jms');
citysFlight[38]=new Array('mdg','牡丹江','mudanjiang','mdj');
citysFlight[39]=new Array('ynj','延吉','yanji','yj');
citysFlight[40]=new Array('het','呼和浩特','huhehaote','hhht');
//国际始发
citysFlight[41]=new Array('icn','首尔','shouer','se');
citysFlight[42]=new Array('cju','济州','jizhou','jz');
citysFlight[43]=new Array('pus','釜山','fushan','fs');
citysFlight[44]=new Array('tae','大邱','daqiu','dq');
citysFlight[45]=new Array('del','新德里','xindeli','xdl');
citysFlight[46]=new Array('kix','大阪','daban','db');
citysFlight[47]=new Array('ngo','名古屋','mingguwu','mgw');
citysFlight[48]=new Array('nrt','东京','dongjing','dj');
citysFlight[49]=new Array('fuk','福冈','fugang','fg');

citysFlight[141]=new Array('icn','首尔','shouer','se');
citysFlight[142]=new Array('cju','济州','jizhou','jz');
citysFlight[143]=new Array('pus','釜山','fushan','fs');
citysFlight[144]=new Array('tae','大邱','daqiu','dq');
citysFlight[145]=new Array('del','新德里','xindeli','xdl');
citysFlight[146]=new Array('kix','大阪','daban','db');
citysFlight[147]=new Array('ngo','名古屋','mingguwu','mgw');
citysFlight[148]=new Array('nrt','东京','dongjing','dj');
citysFlight[149]=new Array('fuk','福冈','fugang','fg');

citysFlight[241]=new Array('icn','首尔','shouer','se');
citysFlight[242]=new Array('cju','济州','jizhou','jz');
citysFlight[43]=new Array('pus','釜山','fushan','fs');
citysFlight[244]=new Array('tae','大邱','daqiu','dq');
citysFlight[245]=new Array('del','新德里','xindeli','xdl');
citysFlight[246]=new Array('kix','大阪','daban','db');
citysFlight[247]=new Array('ngo','名古屋','mingguwu','mgw');
citysFlight[248]=new Array('nrt','东京','dongjing','dj');
citysFlight[249]=new Array('fuk','福冈','fugang','fg');

citysFlight[341]=new Array('icn','首尔','shouer','se');
citysFlight[342]=new Array('cju','济州','jizhou','jz');
citysFlight[343]=new Array('pus','釜山','fushan','fs');
citysFlight[344]=new Array('tae','大邱','daqiu','dq');
citysFlight[345]=new Array('del','新德里','xindeli','xdl');
citysFlight[346]=new Array('kix','大阪','daban','db');
citysFlight[347]=new Array('ngo','名古屋','mingguwu','mgw');
citysFlight[348]=new Array('nrt','东京','dongjing','dj');
citysFlight[349]=new Array('fuk','福冈','fugang','fg');

citysFlight[41]=new Array('icn','首尔','shouer','se');
citysFlight[42]=new Array('cju','济州','jizhou','jz');
citysFlight[43]=new Array('pus','釜山','fushan','fs');
citysFlight[44]=new Array('tae','大邱','daqiu','dq');
citysFlight[45]=new Array('del','新德里','xindeli','xdl');
citysFlight[46]=new Array('kix','大阪','daban','db');
citysFlight[47]=new Array('ngo','名古屋','mingguwu','mgw');
citysFlight[48]=new Array('nrt','东京','dongjing','dj');
citysFlight[49]=new Array('fuk','福冈','fugang','fg');

//初始化国际城市
var citysFlightTo=new Array();
citysFlightTo[0]=new Array('HKG','香港','xianggang','xg');
citysFlightTo[1]=new Array('TPE','台北','taibei','tb');
citysFlightTo[2]=new Array('SIN','新加坡','xinjiapo','xjp');
citysFlightTo[3]=new Array('BKK','曼谷','mangu','mg');
citysFlightTo[4]=new Array('JKT','雅加达','yajiada','yjd');
citysFlightTo[5]=new Array('KUL','吉隆坡','jilongpo','jlp');
citysFlightTo[6]=new Array('REP','暹粒','xianli','xl');
citysFlightTo[7]=new Array('PNH','金边','jinbian','jb');
citysFlightTo[8]=new Array('KTM','加德满都','jiademandu','jdmd');
citysFlightTo[9]=new Array('SGN','胡志明','huzhiming','hzm');
citysFlightTo[10]=new Array('HAN','河内','henei','hl');
citysFlightTo[11]=new Array('MNL','马尼拉','manila','man');
citysFlightTo[12]=new Array('RGN','仰光','yanguang','yg');
citysFlightTo[13]=new Array('PEN','槟城','bincheng','bc');
citysFlightTo[14]=new Array('MLE','马累','male','ml');
citysFlightTo[15]=new Array('DEL','新德里','xindeli','xdl');
citysFlightTo[16]=new Array('NRT','东京','dongjing','dj');
citysFlightTo[17]=new Array('KIX','大阪','daban','db');
citysFlightTo[18]=new Array('NGO','名古屋','mingguwu','mgw');
citysFlightTo[19]=new Array('fuk','福冈','fugang','fg');
citysFlightTo[20]=new Array('cju','济州','jizhou','jz');
citysFlightTo[21]=new Array('del','新德里','xindeli','xdl');
citysFlightTo[23]=new Array('ngo','名古屋','mingguwu','mgw');
citysFlightTo[24]=new Array('nrt','东京','dongjing','dj');
citysFlightTo[25]=new Array('KIJ','新泻','xinxie','xx');
citysFlightTo[26]=new Array('TOY','富山','fushan','fs');
citysFlightTo[27]=new Array('HIJ','广岛','guangdao','gd');
citysFlightTo[28]=new Array('SDJ','仙台','xiantai','xt');
citysFlightTo[29]=new Array('CTS','札幌','zhahuang','zh');
citysFlightTo[30]=new Array('icn','首尔','shouer','se');
citysFlightTo[31]=new Array('pus','釜山','fushan','fs');
citysFlightTo[32]=new Array('tae','大邱','daqiu','dq');
citysFlightTo[33]=new Array('HKG','迪拜','dibai','db');
citysFlightTo[34]=new Array('ALA','阿拉木图','alamitu','almt');
citysFlightTo[35]=new Array('IKA','德黑兰','deheilan','dhl');
citysFlightTo[36]=new Array('ISB','伊斯兰堡','yisilanbao','yslb');
citysFlightTo[37]=new Array('FRU','比什凯克','bierkaike','bekk');
citysFlightTo[38]=new Array('ASB','阿什哈巴德','ashenhabade','ashbd');
citysFlightTo[39]=new Array('BAK','巴库','baku','bk');
citysFlightTo[40]=new Array('VVO','海参崴','haishenwai','hsw');
citysFlightTo[41]=new Array('OVB','新西伯利亚','xinxiboliya','xxbly');
citysFlightTo[42]=new Array('DYU','杜尚别','dushangbie','dsb');
citysFlightTo[43]=new Array('KHV','哈巴罗夫斯克','habaluofusike','hblfsk');
citysFlightTo[44]=new Array('OSS','奥什','aoshen','as');
citysFlightTo[45]=new Array('TAS','塔什干','tashengan','tsg');
citysFlightTo[46]=new Array('JED','吉达','jida','jd');
citysFlightTo[47]=new Array('DAC','达卡','daka','dk');
citysFlightTo[48]=new Array('MEL','墨尔本','moerben','meb');
citysFlightTo[49]=new Array('SYD','悉尼','xini','xn');
citysFlightTo[50]=new Array('BNE','布里斯班','bulisiban','blsb');
citysFlightTo[51]=new Array('AKL','奥克兰','aokelan','akl');
citysFlightTo[52]=new Array('CDG','巴黎','bali','bl');
citysFlightTo[53]=new Array('AMS','阿姆斯特丹','amusitedan','amstd');
citysFlightTo[54]=new Array('LAX','洛杉矶','luoshanji','lsj');
citysFlightTo[55]=new Array('SVO','莫斯科','mosike','msk');
citysFlightTo[56]=new Array('YVR','温哥华','wengehua','wgh');

****************************************************************************************************************

想要实列代码到我们资源下载-----http://download.csdn.net/detail/guyongqing52/4419171

iteye_6481

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery仿携程网城市选择插件

效果------- HTML:&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xht...
复制链接

扫一扫