city_list.html 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  4. <title>Demo</title>
  5. <style type="text/css">
  6. .demo{width:220px;margin:20px auto;}
  7. /* citySelector */
  8. .citySelector{font:12px/1.5 tahoma,arial,\5b8b\4f53;background:#fff;text-align:left;}
  9. .cityslide{width:250px;list-style:none;margin:0;padding:0;border:1px solid #85BEE5;border-right-color:#3485C0;border-bottom-color:#3485C0;box-shadow:2px 2px 3px rgba(0,0,0,0.3);margin-top:-2px;}
  10. .cityslide li{list-style:none;overflow:hidden;height:16px;padding:4px 5px;}
  11. .cityslide li.on{background:#9CD9FF;color:#fff;}
  12. .cityslide li b{font-weight:normal;}
  13. .cityslide li.empty{background:#fff2e8;color:#666;}
  14. .cityslide li.empty em{color:red;font-style:normal;}
  15. .cityname{float:left;}
  16. .cityspell{float:right;}
  17. .cityBox{width:320px;border:1px solid #85BEE5;overflow:hidden;box-shadow:2px 2px 3px rgba(0,0,0,0.3);}
  18. .cityBox ul{margin:0;padding:0;overflow:hidden;}
  19. .cityBox ul li{float:left;list-style:none;padding:2px 4px;border:1px solid #85BEE5;cursor:pointer;margin-left:4px;display:inline;background:#E1EFFE;}
  20. .cityBox ul li.on{background:#fff;border-bottom-color:#fff;position:relative;}
  21. .hide{display:none;}
  22. p.tip{color:#666;line-height:20px;padding:5px;margin:0;text-indent:3px;}
  23. .hotCity{border-top:1px solid #85BEE5;margin-top:-1px;clear:left;overflow:hidden;padding-bottom:5px;padding-top:5px;_margin-bottom:8px;}
  24. .cityTab{overflow:hidden;}
  25. .cityTab dl{margin:0;padding:0;overflow:hidden;}
  26. .cityTab dl dt{float:left;padding-left:3px;color:#F30;text-indent:5px;font-family:"Lucida console","consolas","courier new";line-height:22px;font-size:14px;width:20px;}
  27. .cityTab dl dd{margin-left:2px;float:left;width:290px;}
  28. .cityTab dl dd a{padding-left:5px;width:66px;line-height:22px;display:inline-block;color:#000;text-decoration:none;}
  29. .cityTab dl dd a:hover{text-decoration:underline;color:red}
  30. .cityinput{ font-size: 12px; padding-left: 2px; background: url(T1EPyLXm0hXXXXXXXX-200-100.png) no-repeat 150px 5px; border: 1px solid #D8D8D8; }
  31. </style>
  32. </head>
  33. <body>
  34. <input class="cityinput" id="citySelect" value="城市名">
  35. <script type="text/javascript">
  36. /* *
  37. * ---------------------------------------- *
  38. * 城市选择组件 v1.0
  39. * Author: VVG
  40. * QQ: 83816819
  41. * Mail: mysheller@163.com
  42. * http://www.cnblogs.com/NNUF/
  43. * ---------------------------------------- *
  44. * Date: 2012-07-10
  45. * ---------------------------------------- *
  46. * */
  47. /* *
  48. * 全局空间 Vcity
  49. * */
  50. var Vcity = {};
  51. /* *
  52. * 静态方法集
  53. * @name _m
  54. * */
  55. Vcity._m = {
  56. /* 选择元素 */
  57. $:function (arg, context) {
  58. var tagAll, n, eles = [], i, sub = arg.substring(1);
  59. context = context || document;
  60. if (typeof arg == 'string') {
  61. switch (arg.charAt(0)) {
  62. case '#':
  63. return document.getElementById(sub);
  64. break;
  65. case '.':
  66. if (context.getElementsByClassName) return context.getElementsByClassName(sub);
  67. tagAll = Vcity._m.$('*', context);
  68. n = tagAll.length;
  69. for (i = 0; i < n; i++) {
  70. if (tagAll[i].className.indexOf(sub) > -1) eles.push(tagAll[i]);
  71. }
  72. return eles;
  73. break;
  74. default:
  75. return context.getElementsByTagName(arg);
  76. break;
  77. }
  78. }
  79. },
  80. /* 绑定事件 */
  81. on:function (node, type, handler) {
  82. node.addEventListener ? node.addEventListener(type, handler, false) : node.attachEvent('on' + type, handler);
  83. },
  84. /* 获取事件 */
  85. getEvent:function(event){
  86. return event || window.event;
  87. },
  88. /* 获取事件目标 */
  89. getTarget:function(event){
  90. return event.target || event.srcElement;
  91. },
  92. /* 获取元素位置 */
  93. getPos:function (node) {
  94. var scrollx = document.documentElement.scrollLeft || document.body.scrollLeft,
  95. scrollt = document.documentElement.scrollTop || document.body.scrollTop;
  96. var pos = node.getBoundingClientRect();
  97. return {top:pos.top + scrollt, right:pos.right + scrollx, bottom:pos.bottom + scrollt, left:pos.left + scrollx }
  98. },
  99. /* 添加样式名 */
  100. addClass:function (c, node) {
  101. if(!node)return;
  102. node.className = Vcity._m.hasClass(c,node) ? node.className : node.className + ' ' + c ;
  103. },
  104. /* 移除样式名 */
  105. removeClass:function (c, node) {
  106. var reg = new RegExp("(^|\\s+)" + c + "(\\s+|$)", "g");
  107. if(!Vcity._m.hasClass(c,node))return;
  108. node.className = reg.test(node.className) ? node.className.replace(reg, '') : node.className;
  109. },
  110. /* 是否含有CLASS */
  111. hasClass:function (c, node) {
  112. if(!node || !node.className)return false;
  113. return node.className.indexOf(c)>-1;
  114. },
  115. /* 阻止冒泡 */
  116. stopPropagation:function (event) {
  117. event = event || window.event;
  118. event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;
  119. },
  120. /* 去除两端空格 */
  121. trim:function (str) {
  122. return str.replace(/^\s+|\s+$/g,'');
  123. }
  124. };
  125. /* 所有城市数据,可以按照格式自行添加(北京|beijing|bj),前16条为热门城市 */
  126. Vcity.allCity = ['北京|beijing|bj','上海|shanghai|sh', '重庆|chongqing|cq', '深圳|shenzhen|sz', '广州|guangzhou|gz', '杭州|hangzhou|hz',
  127. '南京|nanjing|nj', '苏州|shuzhou|sz', '天津|tianjin|tj', '成都|chengdu|cd', '南昌|nanchang|nc', '三亚|sanya|sy','青岛|qingdao|qd',
  128. '厦门|xiamen|xm', '西安|xian|xa','长沙|changsha|cs','合肥|hefei|hf','西藏|xizang|xz', '内蒙古|neimenggu|nmg', '安庆|anqing|aq', '阿泰勒|ataile|atl', '安康|ankang|ak',
  129. '阿克苏|akesu|aks', '包头|baotou|bt', '北海|beihai|bh', '百色|baise|bs','保山|baoshan|bs', '长治|changzhi|cz', '长春|changchun|cc', '常州|changzhou|cz', '昌都|changdu|cd',
  130. '朝阳|chaoyang|cy', '常德|changde|cd', '长白山|changbaishan|cbs', '赤峰|chifeng|cf', '大同|datong|dt', '大连|dalian|dl', '达县|daxian|dx', '东营|dongying|dy', '大庆|daqing|dq', '丹东|dandong|dd',
  131. '大理|dali|dl', '敦煌|dunhuang|dh', '鄂尔多斯|eerduosi|eeds', '恩施|enshi|es', '福州|fuzhou|fz', '阜阳|fuyang|fy', '贵阳|guiyang|gy',
  132. '桂林|guilin|gl', '广元|guangyuan|gy', '格尔木|geermu|gem', '呼和浩特|huhehaote|hhht', '哈密|hami|hm',
  133. '黑河|heihe|hh', '海拉尔|hailaer|hle', '哈尔滨|haerbin|heb', '海口|haikou|hk', '黄山|huangshan|hs', '邯郸|handan|hd',
  134. '汉中|hanzhong|hz', '和田|hetian|ht', '晋江|jinjiang|jj', '锦州|jinzhou|jz', '景德镇|jingdezhen|jdz',
  135. '嘉峪关|jiayuguan|jyg', '井冈山|jinggangshan|jgs', '济宁|jining|jn', '九江|jiujiang|jj', '佳木斯|jiamusi|jms', '济南|jinan|jn',
  136. '喀什|kashi|ks', '昆明|kunming|km', '康定|kangding|kd', '克拉玛依|kelamayi|klmy', '库尔勒|kuerle|kel', '库车|kuche|kc', '兰州|lanzhou|lz',
  137. '洛阳|luoyang|ly', '丽江|lijiang|lj', '林芝|linzhi|lz', '柳州|liuzhou|lz', '泸州|luzhou|lz', '连云港|lianyungang|lyg', '黎平|liping|lp',
  138. '连成|liancheng|lc', '拉萨|lasa|ls', '临沧|lincang|lc', '临沂|linyi|ly', '芒市|mangshi|ms', '牡丹江|mudanjiang|mdj', '满洲里|manzhouli|mzl', '绵阳|mianyang|my',
  139. '梅县|meixian|mx', '漠河|mohe|mh', '南充|nanchong|nc', '南宁|nanning|nn', '南阳|nanyang|ny', '南通|nantong|nt', '那拉提|nalati|nlt',
  140. '宁波|ningbo|nb', '攀枝花|panzhihua|pzh', '衢州|quzhou|qz', '秦皇岛|qinhuangdao|qhd', '庆阳|qingyang|qy', '齐齐哈尔|qiqihaer|qqhe',
  141. '石家庄|shijiazhuang|sjz', '沈阳|shenyang|sy', '思茅|simao|sm', '铜仁|tongren|tr', '塔城|tacheng|tc', '腾冲|tengchong|tc', '台州|taizhou|tz',
  142. '通辽|tongliao|tl', '太原|taiyuan|ty', '威海|weihai|wh', '梧州|wuzhou|wz', '文山|wenshan|ws', '无锡|wuxi|wx', '潍坊|weifang|wf', '武夷山|wuyishan|wys', '乌兰浩特|wulanhaote|wlht',
  143. '温州|wenzhou|wz', '乌鲁木齐|wulumuqi|wlmq', '万州|wanzhou|wz', '乌海|wuhai|wh', '兴义|xingyi|xy', '西昌|xichang|xc', '襄樊|xiangfan|xf',
  144. '西宁|xining|xn', '锡林浩特|xilinhaote|xlht', '西双版纳|xishuangbanna|xsbn', '徐州|xuzhou|xz', '义乌|yiwu|yw', '永州|yongzhou|yz', '榆林|yulin|yl', '延安|yanan|ya', '运城|yuncheng|yc',
  145. '烟台|yantai|yt', '银川|yinchuan|yc', '宜昌|yichang|yc', '宜宾|yibin|yb', '盐城|yancheng|yc', '延吉|yanji|yj', '玉树|yushu|ys', '伊宁|yining|yn', '珠海|zhuhai|zh', '昭通|zhaotong|zt',
  146. '张家界|zhangjiajie|zjj', '舟山|zhoushan|zs', '郑州|zhengzhou|zz', '中卫|zhongwei|zw', '芷江|zhijiang|zj', '湛江|zhanjiang|zj'];
  147. /* 正则表达式 筛选中文城市名、拼音、首字母 */
  148. Vcity.regEx = /^([\u4E00-\u9FA5\uf900-\ufa2d]+)\|(\w+)\|(\w)\w*$/i;
  149. Vcity.regExChiese = /([\u4E00-\u9FA5\uf900-\ufa2d]+)/;
  150. /* *
  151. * 格式化城市数组为对象oCity,按照a-h,i-p,q-z,hot热门城市分组:
  152. * {HOT:{hot:[]},ABCDEFGH:{a:[1,2,3],b:[1,2,3]},IJKLMNOP:{i:[1.2.3],j:[1,2,3]},QRSTUVWXYZ:{}}
  153. * */
  154. (function () {
  155. var citys = Vcity.allCity, match, letter,
  156. regEx = Vcity.regEx,
  157. reg2 = /^[a-h]$/i, reg3 = /^[i-p]$/i, reg4 = /^[q-z]$/i;
  158. if (!Vcity.oCity) {
  159. Vcity.oCity = {hot:{},ABCDEFGH:{}, IJKLMNOP:{}, QRSTUVWXYZ:{}};
  160. //console.log(citys.length);
  161. for (var i = 0, n = citys.length; i < n; i++) {
  162. match = regEx.exec(citys[i]);
  163. letter = match[3].toUpperCase();
  164. if (reg2.test(letter)) {
  165. if (!Vcity.oCity.ABCDEFGH[letter]) Vcity.oCity.ABCDEFGH[letter] = [];
  166. Vcity.oCity.ABCDEFGH[letter].push(match[1]);
  167. } else if (reg3.test(letter)) {
  168. if (!Vcity.oCity.IJKLMNOP[letter]) Vcity.oCity.IJKLMNOP[letter] = [];
  169. Vcity.oCity.IJKLMNOP[letter].push(match[1]);
  170. } else if (reg4.test(letter)) {
  171. if (!Vcity.oCity.QRSTUVWXYZ[letter]) Vcity.oCity.QRSTUVWXYZ[letter] = [];
  172. Vcity.oCity.QRSTUVWXYZ[letter].push(match[1]);
  173. }
  174. /* 热门城市 前16条 */
  175. if(i<16){
  176. if(!Vcity.oCity.hot['hot']) Vcity.oCity.hot['hot'] = [];
  177. Vcity.oCity.hot['hot'].push(match[1]);
  178. }
  179. }
  180. }
  181. })();
  182. /* 城市HTML模板 */
  183. Vcity._template = [
  184. '<p class="tip">热门城市(支持汉字/拼音)</p>',
  185. '<ul>',
  186. '<li class="on">热门城市</li>',
  187. '<li>ABCDEFGH</li>',
  188. '<li>IJKLMNOP</li>',
  189. '<li>QRSTUVWXYZ</li>',
  190. '</ul>'
  191. ];
  192. /* *
  193. * 城市控件构造函数
  194. * @CitySelector
  195. * */
  196. Vcity.CitySelector = function () {
  197. this.initialize.apply(this, arguments);
  198. };
  199. Vcity.CitySelector.prototype = {
  200. constructor:Vcity.CitySelector,
  201. /* 初始化 */
  202. initialize :function (options) {
  203. var input = options.input;
  204. this.input = Vcity._m.$('#'+ input);
  205. this.inputEvent();
  206. },
  207. /* *
  208. * @createWarp
  209. * 创建城市BOX HTML 框架
  210. * */
  211. createWarp:function(){
  212. var inputPos = Vcity._m.getPos(this.input);
  213. var div = this.rootDiv = document.createElement('div');
  214. var that = this;
  215. // 设置DIV阻止冒泡
  216. Vcity._m.on(this.rootDiv,'click',function(event){
  217. Vcity._m.stopPropagation(event);
  218. });
  219. // 设置点击文档隐藏弹出的城市选择框
  220. Vcity._m.on(document, 'click', function (event) {
  221. event = Vcity._m.getEvent(event);
  222. var target = Vcity._m.getTarget(event);
  223. if(target == that.input) return false;
  224. //console.log(target.className);
  225. if (that.cityBox)Vcity._m.addClass('hide', that.cityBox);
  226. if (that.ul)Vcity._m.addClass('hide', that.ul);
  227. if(that.myIframe)Vcity._m.addClass('hide',that.myIframe);
  228. });
  229. div.className = 'citySelector';
  230. div.style.position = 'absolute';
  231. div.style.left = inputPos.left + 'px';
  232. div.style.top = inputPos.bottom + 'px';
  233. div.style.zIndex = 999999;
  234. // 判断是否IE6,如果是IE6需要添加iframe才能遮住SELECT框
  235. var isIe = (document.all) ? true : false;
  236. var isIE6 = this.isIE6 = isIe && !window.XMLHttpRequest;
  237. if(isIE6){
  238. var myIframe = this.myIframe = document.createElement('iframe');
  239. myIframe.frameborder = '0';
  240. myIframe.src = 'about:blank';
  241. myIframe.style.position = 'absolute';
  242. myIframe.style.zIndex = '-1';
  243. this.rootDiv.appendChild(this.myIframe);
  244. }
  245. var childdiv = this.cityBox = document.createElement('div');
  246. childdiv.className = 'cityBox';
  247. childdiv.id = 'cityBox';
  248. childdiv.innerHTML = Vcity._template.join('');
  249. var hotCity = this.hotCity = document.createElement('div');
  250. hotCity.className = 'hotCity';
  251. childdiv.appendChild(hotCity);
  252. div.appendChild(childdiv);
  253. this.createHotCity();
  254. },
  255. /* *
  256. * @createHotCity
  257. * TAB下面DIV:hot,a-h,i-p,q-z 分类HTML生成,DOM操作
  258. * {HOT:{hot:[]},ABCDEFGH:{a:[1,2,3],b:[1,2,3]},IJKLMNOP:{},QRSTUVWXYZ:{}}
  259. **/
  260. createHotCity:function(){
  261. var odiv,odl,odt,odd,odda=[],str,key,ckey,sortKey,regEx = Vcity.regEx,
  262. oCity = Vcity.oCity;
  263. for(key in oCity){
  264. odiv = this[key] = document.createElement('div');
  265. // 先设置全部隐藏hide
  266. odiv.className = key + ' ' + 'cityTab hide';
  267. sortKey=[];
  268. for(ckey in oCity[key]){
  269. sortKey.push(ckey);
  270. // ckey按照ABCDEDG顺序排序
  271. sortKey.sort();
  272. }
  273. for(var j=0,k = sortKey.length;j<k;j++){
  274. odl = document.createElement('dl');
  275. odt = document.createElement('dt');
  276. odd = document.createElement('dd');
  277. odt.innerHTML = sortKey[j] == 'hot'?'&nbsp;':sortKey[j];
  278. odda = [];
  279. for(var i=0,n=oCity[key][sortKey[j]].length;i<n;i++){
  280. str = '<a href="#">' + oCity[key][sortKey[j]][i] + '</a>';
  281. odda.push(str);
  282. }
  283. odd.innerHTML = odda.join('');
  284. odl.appendChild(odt);
  285. odl.appendChild(odd);
  286. odiv.appendChild(odl);
  287. }
  288. // 移除热门城市的隐藏CSS
  289. Vcity._m.removeClass('hide',this.hot);
  290. this.hotCity.appendChild(odiv);
  291. }
  292. document.body.appendChild(this.rootDiv);
  293. /* IE6 */
  294. this.changeIframe();
  295. this.tabChange();
  296. this.linkEvent();
  297. },
  298. /* *
  299. * tab按字母顺序切换
  300. * @ tabChange
  301. * */
  302. tabChange:function(){
  303. var lis = Vcity._m.$('li',this.cityBox);
  304. var divs = Vcity._m.$('div',this.hotCity);
  305. var that = this;
  306. for(var i=0,n=lis.length;i<n;i++){
  307. lis[i].index = i;
  308. lis[i].onclick = function(){
  309. for(var j=0;j<n;j++){
  310. Vcity._m.removeClass('on',lis[j]);
  311. Vcity._m.addClass('hide',divs[j]);
  312. }
  313. Vcity._m.addClass('on',this);
  314. Vcity._m.removeClass('hide',divs[this.index]);
  315. /* IE6 改变TAB的时候 改变Iframe 大小*/
  316. that.changeIframe();
  317. };
  318. }
  319. },
  320. /* *
  321. * 城市LINK事件
  322. * @linkEvent
  323. * */
  324. linkEvent:function(){
  325. var links = Vcity._m.$('a',this.hotCity);
  326. var that = this;
  327. for(var i=0,n=links.length;i<n;i++){
  328. links[i].onclick = function(){
  329. that.input.value = this.innerHTML;
  330. Vcity._m.addClass('hide',that.cityBox);
  331. /* 点击城市名的时候隐藏myIframe */
  332. Vcity._m.addClass('hide',that.myIframe);
  333. }
  334. }
  335. },
  336. /* *
  337. * INPUT城市输入框事件
  338. * @inputEvent
  339. * */
  340. inputEvent:function(){
  341. var that = this;
  342. Vcity._m.on(this.input,'click',function(event){
  343. event = event || window.event;
  344. if(!that.cityBox){
  345. that.createWarp();
  346. }else if(!!that.cityBox && Vcity._m.hasClass('hide',that.cityBox)){
  347. // slideul 不存在或者 slideul存在但是是隐藏的时候 两者不能共存
  348. if(!that.ul || (that.ul && Vcity._m.hasClass('hide',that.ul))){
  349. Vcity._m.removeClass('hide',that.cityBox);
  350. /* IE6 移除iframe 的hide 样式 */
  351. //alert('click');
  352. Vcity._m.removeClass('hide',that.myIframe);
  353. that.changeIframe();
  354. }
  355. }
  356. });
  357. Vcity._m.on(this.input,'focus',function(){
  358. that.input.select();
  359. if(that.input.value == '城市名') that.input.value = '';
  360. });
  361. Vcity._m.on(this.input,'blur',function(){
  362. if(that.input.value == '') that.input.value = '城市名';
  363. });
  364. Vcity._m.on(this.input,'keyup',function(event){
  365. event = event || window.event;
  366. var keycode = event.keyCode;
  367. Vcity._m.addClass('hide',that.cityBox);
  368. that.createUl();
  369. /* 移除iframe 的hide 样式 */
  370. Vcity._m.removeClass('hide',that.myIframe);
  371. // 下拉菜单显示的时候捕捉按键事件
  372. if(that.ul && !Vcity._m.hasClass('hide',that.ul) && !that.isEmpty){
  373. that.KeyboardEvent(event,keycode);
  374. }
  375. });
  376. },
  377. /* *
  378. * 生成下拉选择列表
  379. * @ createUl
  380. * */
  381. createUl:function () {
  382. //console.log('createUL');
  383. var str;
  384. var value = Vcity._m.trim(this.input.value);
  385. // 当value不等于空的时候执行
  386. if (value !== '') {
  387. var reg = new RegExp("^" + value + "|\\|" + value, 'gi');
  388. // 此处需设置中文输入法也可用onpropertychange
  389. var searchResult = [];
  390. for (var i = 0, n = Vcity.allCity.length; i < n; i++) {
  391. if (reg.test(Vcity.allCity[i])) {
  392. var match = Vcity.regEx.exec(Vcity.allCity[i]);
  393. if (searchResult.length !== 0) {
  394. str = '<li><b class="cityname">' + match[1] + '</b><b class="cityspell">' + match[2] + '</b></li>';
  395. } else {
  396. str = '<li class="on"><b class="cityname">' + match[1] + '</b><b class="cityspell">' + match[2] + '</b></li>';
  397. }
  398. searchResult.push(str);
  399. }
  400. }
  401. this.isEmpty = false;
  402. // 如果搜索数据为空
  403. if (searchResult.length == 0) {
  404. this.isEmpty = true;
  405. str = '<li class="empty">对不起,没有找到数据 "<em>' + value + '</em>"</li>';
  406. searchResult.push(str);
  407. }
  408. // 如果slideul不存在则添加ul
  409. if (!this.ul) {
  410. var ul = this.ul = document.createElement('ul');
  411. ul.className = 'cityslide';
  412. this.rootDiv && this.rootDiv.appendChild(ul);
  413. // 记录按键次数,方向键
  414. this.count = 0;
  415. } else if (this.ul && Vcity._m.hasClass('hide', this.ul)) {
  416. this.count = 0;
  417. Vcity._m.removeClass('hide', this.ul);
  418. }
  419. this.ul.innerHTML = searchResult.join('');
  420. /* IE6 */
  421. this.changeIframe();
  422. // 绑定Li事件
  423. this.liEvent();
  424. }else{
  425. Vcity._m.addClass('hide',this.ul);
  426. Vcity._m.removeClass('hide',this.cityBox);
  427. Vcity._m.removeClass('hide',this.myIframe);
  428. this.changeIframe();
  429. }
  430. },
  431. /* IE6的改变遮罩SELECT 的 IFRAME尺寸大小 */
  432. changeIframe:function(){
  433. if(!this.isIE6)return;
  434. this.myIframe.style.width = this.rootDiv.offsetWidth + 'px';
  435. this.myIframe.style.height = this.rootDiv.offsetHeight + 'px';
  436. },
  437. /* *
  438. * 特定键盘事件,上、下、Enter键
  439. * @ KeyboardEvent
  440. * */
  441. KeyboardEvent:function(event,keycode){
  442. var lis = Vcity._m.$('li',this.ul);
  443. var len = lis.length;
  444. switch(keycode){
  445. case 40: //向下箭头↓
  446. this.count++;
  447. if(this.count > len-1) this.count = 0;
  448. for(var i=0;i<len;i++){
  449. Vcity._m.removeClass('on',lis[i]);
  450. }
  451. Vcity._m.addClass('on',lis[this.count]);
  452. break;
  453. case 38: //向上箭头↑
  454. this.count--;
  455. if(this.count<0) this.count = len-1;
  456. for(i=0;i<len;i++){
  457. Vcity._m.removeClass('on',lis[i]);
  458. }
  459. Vcity._m.addClass('on',lis[this.count]);
  460. break;
  461. case 13: // enter键
  462. this.input.value = Vcity.regExChiese.exec(lis[this.count].innerHTML)[0];
  463. Vcity._m.addClass('hide',this.ul);
  464. Vcity._m.addClass('hide',this.ul);
  465. /* IE6 */
  466. Vcity._m.addClass('hide',this.myIframe);
  467. break;
  468. default:
  469. break;
  470. }
  471. },
  472. /* *
  473. * 下拉列表的li事件
  474. * @ liEvent
  475. * */
  476. liEvent:function(){
  477. var that = this;
  478. var lis = Vcity._m.$('li',this.ul);
  479. for(var i = 0,n = lis.length;i < n;i++){
  480. Vcity._m.on(lis[i],'click',function(event){
  481. event = Vcity._m.getEvent(event);
  482. var target = Vcity._m.getTarget(event);
  483. that.input.value = Vcity.regExChiese.exec(target.innerHTML)[0];
  484. Vcity._m.addClass('hide',that.ul);
  485. /* IE6 下拉菜单点击事件 */
  486. Vcity._m.addClass('hide',that.myIframe);
  487. });
  488. Vcity._m.on(lis[i],'mouseover',function(event){
  489. event = Vcity._m.getEvent(event);
  490. var target = Vcity._m.getTarget(event);
  491. Vcity._m.addClass('on',target);
  492. });
  493. Vcity._m.on(lis[i],'mouseout',function(event){
  494. event = Vcity._m.getEvent(event);
  495. var target = Vcity._m.getTarget(event);
  496. Vcity._m.removeClass('on',target);
  497. })
  498. }
  499. }
  500. };
  501. var test=new Vcity.CitySelector({input:'citySelect'});
  502. var test2=new Vcity.CitySelector({input:'citySelect1'});
  503. </script>
  504. <div class="citySelector" style="position: absolute; left: 8px; top: 25.6px; z-index: 999999;">
  505. <div class="cityBox hide" id="cityBox"></div>
  506. </div>
  507. </body>
  508. </html>