JavaScript实现城市选择控件的效果

看到了city SELECTion对淘宝旅游的效果，感觉不错。我会重新落实我自己的理解，先看效果(有人说IE9下有BUG，LZ用的是落后的XP，但是我装不下IE9，我要去公司做好)，然后我会详细说明实现原理，支持鼠标按键选择城市，支持直接输入城市名称，拼音首字母，完整拼写，支持IE6覆盖选择，压缩后12K。

实施步骤：

首先，以一定的格式列出控件需要的城市和拼音。我按照以下格式将它们排列成一个数组。如果需要添加城市，可以直接在数组中添加：

我一个接一个地袭击这座城市。

['北京|北京|北京'，' |上海|sh '，'重庆|重庆|cq']

第二，因为控件的城市分组分为几类，比如按照首字母HOT、ABCDEFH、IJKLMNOP、QRSTUVWXYZ分为四组，

分成四组后，按照第一个字母来划分，所以我把数组重新格式化成一个有正则表达式和循环的分组对象，取前16个热门城市。

对象格式如下：

{HOT:{hot:[]}，ABCDEFGH:{a:[1，2，3]，b:[1，2，3]}，IJKLMNOP:{i:[1.2.3]，j:[1，2，3]}，qrstuvwxyz : } }

使用的代码如下：

/* * *将城市数组格式化为对象oCity，并根据a-h、i-p、q-z、热门热门热门城市对其进行分组：* {hot: {hot: []}、abcdefgh3360 {a: [1，2，3]、b: [1，3] j:[1，2，3]}、qrstuvwxyz : { } * */(function(){ var city s=VC city，allCity，match，letter。if(！vcity . ocity){ vcity . ocity={ hot : { }，ABCDEFGH:{}，IJKLMNOP:{}，qrstuvwxyz : { }；//console . log(city s . length)；for (var i=0，n=city s . length；I n；I){ match=RegEx . exec(city s[I])；字母=匹配[3]。toUpperCase()；if (reg2.test(letter)) { if(！vcity . ocity . abcdefgh[字母])vcity . ocity . abcdefgh[字母]=[]；vcity . ocity . ABCDEFGH[字母]。push(匹配[1])；} else if (reg3.test(letter)) { if(！vcity . ocity . ijklmnop[字母])vcity . ocity . ijklmnop[字母]=[]；vcity . ocity . ijklmnop[字母]。push(匹配[1])；} else if (reg4.test(letter)) { if(！vcity . ocity . qrstuvwxyz[字母])vcity . ocity . qrstuvwxyz[字母]=[]；vcity . ocity . qrsutvwxyz[字母]。push(匹配[1])；}/* 16大热门城市*/if(i16){ if(！vcity . ocity . hot[' hot '])vcity . ocity . hot[' hot ']=[]；Vcity.oCity.hot['hot']。push(匹配[1])；} } } })();第三，然后制作HTML和CSS根据淘宝旅行的样子；跳过这里。

第四，建立了城市选择器的构造器。根据城市对象，构建并生成DOM对象，并根据相应的事件触发。根据a \ b \ c \ d生成相应分组时遇到一个.

关于排序，我的对象格式是abcdefgh: {a: [1，2，3]，b: