jquery仿携程网城市选择插件

效果-------

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

jquery仿携程网城市选择插件相关推荐

jQuery世界国家城市选择插件
下载地址这款jQuery国家选择插件样式挺好看,世界国家城市多级联动选择功能很强大,不仅支持全世界各个国家城市的多级联动,而且每一级都支持关键词搜索,可以快速定位需要选择的国家和城市. dd:
html 12306页面实现,jQuery模拟12306城市选择框功能简单实现方法示例
本文实例讲述了jQuery模拟12306城市选择框功能简单实现方法.分享给大家供大家参考,具体如下: www.jb51.net jQuery城市选择框 #parent{ width:500px; po ...
php 仿美团切换城市,微信小程序仿美团城市选择的实现
这篇文章主要为大家详细介绍了微信小程序仿美团城市选择,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了微信小程序城市选择器,供大家参考,具体内容如下代码很简单. var cit ...
html中国家的下拉列表,jQuery Select下拉列表国家选择插件
jQuery Select下拉国家选择插件简介本文提供JQuery国家选择插件制作select下拉框带搜索功能,和图标的下拉国家列表选择插件代码.支持搜索快速查找,带国旗的国家下拉选择插件! jQu ...
android仿ios城市选择,Android 省市区三级联动选择器（仿iOS滚轮实现）
前言在实际的项目中需要使用到省市区三级联动的功能,在网上找来找去,都没有找到一个合适的库, 所以自己就封装了一个,不需要自己添加数据源,直接引用即可,一行代码搞定城市选择.怎么简单,怎么方便,怎么来 ...
微信小程序仿美团城市选择城市切换
原来的城市选择做了一些修改. 代码很简单. var city = require('../../utils/city.js'); var app = getApp() Page({data: {sea ...
城市选择插件 V-Distpicker 组件详解以及全套用法
首先第一步,这个插件是一定要在vue项目中使用的一,安装使用 npm 安装: npm install v-distpicker --save 使用 yarn 安装 yarn add v-distp ...
腾讯地图城市选择插件-三级联动
城市数据来自于腾讯地图- 腾讯地图api http://lbs.qq.com/webservice_v1/guide-region.html 1.设计思路 1.因为是传城市ID获取下级城市数据-所以这 ...
004 - 微信小程序仿美团城市选择城市切换
代码很简单. var city = require('../../utils/city.js'); var app = getApp() Page({data: {searchLetter: [],s ...

jquery仿携程网城市选择插件

jquery仿携程网城市选择插件相关推荐

最新文章

热门文章