需求 : 热门城市、列表中的城市都需要在数据库中查询出来后构建列表，并按a-z排列，输入字母可以实现查询。
多城市选择器实现效果图：
实现：
1 后台根据登录用户获取列表中城市和热门城市的数据
@RequestMapping(value = "/getCity.do")
2 public void getCity(PrintWriter printWriter, HttpServletResponse response)
3 {
4 response.setContentType("text/html;charset=UTF-8");
5 User user = this.getLoginUser();
6 //查询出系统登陆人所有的所属区域名称
7 String allCity = getAllCityProperty(user.getId(), "areaName");
8 String hotCity = getHotCity(allCity);
9 JSONObject json = new JSONObject();
10 json.accumulate("hotCity",hotCity);
11 json.accumulate("allCity",allCity);
12 printWriter.print(json.toString());
13 printWriter.flush();
14 printWriter.close();
15 }2 前台打开界面的时候通过ajax获取城市和热门城市
1 window.onload=function(){
2 var url = "/xxx/getCity.do";
3 var params = {};
4 $.getJSON(url,params,function(data){
5 if(data.length==0)
6 {
7 $.messager.alert('提示',"未找到数据");
8 }else{
9 var hotString = data.hotCity;
10 var allString = data.allCity;
11 new Vcity.CitySelector({input:'city'},allString,hotString);
12 }
13 });
14 }3 citys.js 根据百度上的城市选择组件 新增热门城市和城市变量
/* *
* ---------------------------------------- *
* 城市选择组件 v1.0
* Author: zcx
* ---------------------------------------- *
* Date: 2016-05-17
* ---------------------------------------- *
* */
/* *
* 全局空间 Vcity
* */
var Vcity = {};
/* *
* 静态方法集
* @name _m
* */
Vcity._m = {
/* 选择元素 */
$:function (arg, context) {
var tagAll, n, eles = [], i, sub = arg.substring(1);
context = context || document;
if (typeof arg == 'string') {
switch (arg.charAt(0)) {
case '#':
return document.getElementById(sub);
break;
case '.':
if (context.getElementsByClassName) return context.getElementsByClassName(sub);
tagAll = Vcity._m.$('*', context);
n = tagAll.length;
for (i = 0; i < n; i++) {
if (tagAll[i].className.indexOf(sub) > -1) eles.push(tagAll[i]);
}
return eles;
break;
default:
return context.getElementsByTagName(arg);
break;
}
}
},
/* 绑定事件 */
on:function (node, type, handler) {
node.addEventListener ? node.addEventListener(type, handler, false) : node.attachEvent('on' + type, handler);
},
/* 获取事件 */
getEvent:function(event){
return event || window.event;
},
/* 获取事件目标 */
getTarget:function(event){
return event.target || event.srcElement;
},
/* 获取元素位置 */
getPos:function (node) {
var scrollx = document.documentElement.scrollLeft || document.body.scrollLeft,
scrollt = document.documentElement.scrollTop || document.body.scrollTop;
var pos = node.getBoundingClientRect();
return {top:pos.top + scrollt, right:pos.right + scrollx, bottom:pos.bottom + scrollt, left:pos.left + scrollx }
},
/* 添加样式名 */
addClass:function (c, node) {
if(!node)return;
node.className = Vcity._m.hasClass(c,node) ? node.className : node.className + ' ' + c ;
},
/* 移除样式名 */
removeClass:function (c, node) {
var reg = new RegExp("(^|\\s+)" + c + "(\\s+|$)", "g");
if(!Vcity._m.hasClass(c,node))return;
node.className = reg.test(node.className) ? node.className.replace(reg, '') : node.className;
},
/* 是否含有CLASS */
hasClass:function (c, node) {
if(!node || !node.className)return false;
return node.className.indexOf(c)>-1;
},
/* 阻止冒泡 */
stopPropagation:function (event) {
event = event || window.event;
event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;
},
/* 去除两端空格 */
trim:function (str) {
return str.replace(/^\s+|\s+$/g,'');
}
};
/* 正则表达式 筛选中文城市名、拼音、首字母 */
Vcity.regEx = /^([\u4E00-\u9FA5\uf900-\ufa2d]+)\|(\w+)\|(\w)\w*\|(\d+)$/i;
Vcity.regExChiese = /([\u4E00-\u9FA5\uf900-\ufa2d]+)/;
function adapterCity (citylist,hotStr) {
if(!citylist){
return;
}
var citys = citylist;
var match;
var letter;
var regEx = Vcity.regEx,
reg2 = /^[a]$/i, reg3 = /^[b]$/i, reg4 = /^[c]$/i;
reg5 = /^[d]$/i, reg6 = /^[e]$/i, reg7 = /^[f]$/i;
reg8 = /^[g]$/i, reg9 = /^[h]$/i, reg10 = /^[i]$/i;
reg11 = /^[j]$/i, reg12 = /^[k]$/i, reg13 = /^[l]$/i;
reg14 = /^[m]$/i, reg15 = /^[n]$/i, reg16 = /^[o]$/i;
reg17 = /^[p]$/i, reg18 = /^[q]$/i, reg19 = /^[r]$/i;
reg20 = /^[s]$/i, reg21 = /^[t]$/i, reg22 = /^[u]$/i;
reg23 = /^[v]$/i, reg24 = /^[w]$/i, reg25 = /^[x]$/i;
reg26 = /^[y]$/i, reg27 = /^[z]$/i;
//if (!Vcity.oCity) {
Vcity.oCity = {hot:{},A:{},B:{},C:{},D:{},E:{},F:{},G:{},H:{}, I:{},J:{},K:{},L:{},M:{},N:{},O:{},P:{}, Q:{},R:{},S:{},T:{},U:{},V:{},W:{},X:{},Y:{},Z:{}};
//console.log(citys.length);
for (var i = 0; i < citys.length; i++) {
match = regEx.exec(citys[i]);
letter = match[3].toUpperCase();
if (reg2.test(letter)) {
if (!Vcity.oCity.A[letter]) Vcity.oCity.A[letter] = [];
Vcity.oCity.A[letter].push(match[1]);
} else if (reg3.test(letter)) {
if (!Vcity.oCity.B[letter]) Vcity.oCity.B[letter] = [];
Vcity.oCity.B[letter].push(match[1]);
} else if (reg4.test(letter)) {
if (!Vcity.oCity.C[letter]) Vcity.oCity.C[letter] = [];
Vcity.oCity.C[letter].push(match[1]);
}else if (reg5.test(letter)) {
if (!Vcity.oCity.D[letter]) Vcity.oCity.D[letter] = [];
Vcity.oCity.D[letter].push(match[1]);
}else if (reg6.test(letter)) {
if (!Vcity.oCity.E[letter]) Vcity.oCity.E[letter] = [];
Vcity.oCity.E[letter].push(match[1]);
}else if (reg7.test(letter)) {
if (!Vcity.oCity.F[letter]) Vcity.oCity.F[letter] = [];
Vcity.oCity.F[letter].push(match[1]);
}else if (reg8.test(letter)) {
if (!Vcity.oCity.G[letter]) Vcity.oCity.G[letter] = [];
Vcity.oCity.G[letter].push(match[1]);
}else if (reg9.test(letter)) {
if (!Vcity.oCity.H[letter]) Vcity.oCity.H[letter] = [];
Vcity.oCity.H[letter].push(match[1]);
}else if (reg10.test(letter)) {
if (!Vcity.oCity.I[letter]) Vcity.oCity.I[letter] = [];
Vcity.oCity.I[letter].push(match[1]);
}else if (reg11.test(letter)) {
if (!Vcity.oCity.J[letter]) Vcity.oCity.J[letter] = [];
Vcity.oCity.J[letter].push(match[1]);
}else if (reg12.test(letter)) {
if (!Vcity.oCity.K[letter]) Vcity.oCity.K[letter] = [];
Vcity.oCity.K[letter].push(match[1]);
}else if (reg13.test(letter)) {
if (!Vcity.oCity.L[letter]) Vcity.oCity.L[letter] = [];
Vcity.oCity.L[letter].push(match[1]);
}else if (reg14.test(letter)) {
if (!Vcity.oCity.M[letter]) Vcity.oCity.M[letter] = [];
Vcity.oCity.M[letter].push(match[1]);
}else if (reg15.test(letter)) {
if (!Vcity.oCity.N[letter]) Vcity.oCity.N[letter] = [];
Vcity.oCity.N[letter].push(match[1]);
}else if (reg16.test(letter)) {
if (!Vcity.oCity.O[letter]) Vcity.oCity.O[letter] = [];
Vcity.oCity.O[letter].push(match[1]);
}else if (reg17.test(letter)) {
if (!Vcity.oCity.P[letter]) Vcity.oCity.P[letter] = [];
Vcity.oCity.P[letter].push(match[1]);
}else if (reg18.test(letter)) {
if (!Vcity.oCity.Q[letter]) Vcity.oCity.Q[letter] = [];
Vcity.oCity.Q[letter].push(match[1]);
}else if (reg19.test(letter)) {
if (!Vcity.oCity.R[letter]) Vcity.oCity.R[letter] = [];
Vcity.oCity.R[letter].push(match[1]);
}else if (reg20.test(letter)) {
if (!Vcity.oCity.S[letter]) Vcity.oCity.S[letter] = [];
Vcity.oCity.S[letter].push(match[1]);
}else if (reg21.test(letter)) {
if (!Vcity.oCity.T[letter]) Vcity.oCity.T[letter] = [];
Vcity.oCity.T[letter].push(match[1]);
}else if (reg22.test(letter)) {
if (!Vcity.oCity.U[letter]) Vcity.oCity.U[letter] = [];
Vcity.oCity.U[letter].push(match[1]);
}else if (reg23.test(letter)) {
if (!Vcity.oCity.V[letter]) Vcity.oCity.V[letter] = [];
Vcity.oCity.V[letter].push(match[1]);
}else if (reg24.test(letter)) {
if (!Vcity.oCity.W[letter]) Vcity.oCity.W[letter] = [];
Vcity.oCity.W[letter].push(match[1]);
}else if (reg25.test(letter)) {
if (!Vcity.oCity.X[letter]) Vcity.oCity.X[letter] = [];
Vcity.oCity.X[letter].push(match[1]);
}else if (reg26.test(letter)) {
if (!Vcity.oCity.Y[letter]) Vcity.oCity.Y[letter] = [];
Vcity.oCity.Y[letter].push(match[1]);
}else if (reg27.test(letter)) {
if (!Vcity.oCity.Z[letter]) Vcity.oCity.Z[letter] = [];
Vcity.oCity.Z[letter].push(match[1]);
}
/* 热门城市 */
if(!Vcity.oCity.hot['hot']) Vcity.oCity.hot['hot'] = hotStr;
}
//}
};
/* 城市HTML模板 */
/* 城市HTML模板 */
Vcity._template = [
'<p class="tip">热门城市(支持汉字/拼音)</p>',
'<ul>',
'<li class="on">热门城市</li>',
'<li>A</li>',
'<li>B</li>',
'<li>C</li>',
'<li>D</li>',
'<li>E</li>',
'<li>F</li>',
'<li>G</li>',
'<li>H</li>',
'<li>I</li>',
'<li>J</li>',
'<li>K</li>',
'<li>L</li>',
'<li>M</li>',
'<li>N</li>',
'<li>O</li>',
'<li>P</li>',
'<li>Q</li>',
'<li>R</li>',
'<li>S</li>',
'<li>T</li>',
'<li>U</li>',
'<li>V</li>',
'<li>W</li>',
'<li>x</li>',
'<li>y</li>',
'<li>Z</li>',
'</ul>'
];
/* 城市HTML模板 */
/*Vcity._template = [
'<p class="tip">热门城市(支持汉字/拼音)</p>',
'<ul>',
'<li class="on">热门城市</li>',
'<li>ABCDEFGH</li>',
'<li>IJKLMNOP</li>',
'<li>QRSTUVWXYZ</li>',
'</ul>'
];*/
/* *
* 城市控件构造函数
* @CitySelector
* */
Vcity.CitySelector = function () {
this.initialize.apply(this, arguments);
};
Vcity.CitySelector.prototype = {
constructor:Vcity.CitySelector,
/* 初始化 */
initialize :function (options,istr,hotStr) {
var input = options.input;
this.input = Vcity._m.$('#'+ input);
this.inputEvent(istr,hotStr);
},
/* *
* @createWarp
* 创建城市BOX HTML 框架
* */
createWarp:function(cwstr,hotStr){
var inputPos = Vcity._m.getPos(this.input);
var p = this.rootDiv = document.createElement('p');
var that = this;
// 设置DIV阻止冒泡
Vcity._m.on(this.rootDiv,'click',function(event){
Vcity._m.stopPropagation(event);
});
// 设置点击文档隐藏弹出的城市选择框
Vcity._m.on(document, 'click', function (event) {
event = Vcity._m.getEvent(event);
var target = Vcity._m.getTarget(event);
if(target == that.input) return false;
//console.log(target.className);
if (that.cityBox)Vcity._m.addClass('hide', that.cityBox);
if (that.ul)Vcity._m.addClass('hide', that.ul);
if(that.myIframe)Vcity._m.addClass('hide',that.myIframe);
});
p.className = 'citySelector';
p.style.position = 'absolute';
p.style.left = inputPos.left + 'px';
p.style.top = inputPos.bottom + 'px';
p.style.zIndex = 999999;
// 判断是否IE6，如果是IE6需要添加iframe才能遮住SELECT框
var isIe = (document.all) ? true : false;
var isIE6 = this.isIE6 = isIe && !window.XMLHttpRequest;
if(isIE6){
var myIframe = this.myIframe = document.createElement('iframe');
myIframe.frameborder = '0';
myIframe.src = 'about:blank';
myIframe.style.position = 'absolute';
myIframe.style.zIndex = '-1';
this.rootDiv.appendChild(this.myIframe);
}
var childp = this.cityBox = document.createElement('p');
childp.className = 'cityBox';
childp.id = 'cityBox';
childp.innerHTML = Vcity._template.join('');
var hotCity = this.hotCity = document.createElement('p');
hotCity.className = 'hotCity';
childp.appendChild(hotCity);
p.appendChild(childp);
this.createHotCity(cwstr,hotStr);
},
/* *
* @createHotCity
* TAB下面DIV：hot,a-h,i-p,q-z 分类HTML生成，DOM操作
* {HOT:{hot:[]},ABCDEFGH:{a:[1,2,3],b:[1,2,3]},IJKLMNOP:{},QRSTUVWXYZ:{}}
**/
createHotCity:function(chstr,hotStr){
adapterCity (chstr,hotStr);
var op,odl,odt,odd,odda=[],str,key,ckey,sortKey,regEx = Vcity.regEx,
oCity = Vcity.oCity;
for(key in oCity){
op = this[key] = document.createElement('p');
// 先设置全部隐藏hide
op.className = key + ' ' + 'cityTab hide';
sortKey=[];
for(ckey in oCity[key]){
sortKey.push(ckey);
// ckey按照ABCDEDG顺序排序
sortKey.sort();
}
for(var j=0,k = sortKey.length;j<k;j++){
odl = document.createElement('dl');
odt = document.createElement('dt');
odd = document.createElement('dd');
odt.innerHTML = sortKey[j] == 'hot'?' ':sortKey[j];
odda = [];
for(var i=0,n=oCity[key][sortKey[j]].length;i<n;i++){
str = '<a href="javascript:">' + oCity[key][sortKey[j]][i] + '</a>';
odda.push(str);
}
odd.innerHTML = odda.join('');
odl.appendChild(odt);
odl.appendChild(odd);
op.appendChild(odl);
}
// 移除热门城市的隐藏CSS
Vcity._m.removeClass('hide',this.hot);
this.hotCity.appendChild(op);
}
document.body.appendChild(this.rootDiv);
/* IE6 */
this.changeIframe();
this.tabChange();
this.linkEvent();
},
/* *
* tab按字母顺序切换
* @ tabChange
* */
tabChange:function(){
var lis = Vcity._m.$('li',this.cityBox);
var ps = Vcity._m.$('p',this.hotCity);
var that = this;
for(var i=0,n=lis.length;i<n;i++){
lis[i].index = i;
lis[i].onclick = function(){
for(var j=0;j<n;j++){
Vcity._m.removeClass('on',lis[j]);
Vcity._m.addClass('hide',ps[j]);
}
Vcity._m.addClass('on',this);
Vcity._m.removeClass('hide',ps[this.index]);
/* IE6 改变TAB的时候 改变Iframe 大小*/
that.changeIframe();
};
}
},
/* *
* 城市LINK事件
* @linkEvent
* */
linkEvent:function(){
var links = Vcity._m.$('a',this.hotCity);
var that = this;
for(var i=0,n=links.length;i<n;i++){
links[i].onclick = function(){
that.input.value = this.innerHTML;
Vcity._m.addClass('hide',that.cityBox);
/* 点击城市名的时候隐藏myIframe */
Vcity._m.addClass('hide',that.myIframe);
}
}
},
/* *
* INPUT城市输入框事件
* @inputEvent
* */
inputEvent:function(iestr,hotStr){
var that = this;
Vcity._m.on(this.input,'click',function(event){
event = event || window.event;
if(!that.cityBox){
that.createWarp(iestr,hotStr);
}else if(!!that.cityBox && Vcity._m.hasClass('hide',that.cityBox)){
// slideul 不存在或者 slideul存在但是是隐藏的时候 两者不能共存
if(!that.ul || (that.ul && Vcity._m.hasClass('hide',that.ul))){
Vcity._m.removeClass('hide',that.cityBox);
/* IE6 移除iframe 的hide 样式 */
//alert('click');
Vcity._m.removeClass('hide',that.myIframe);
that.changeIframe();
}
}
});
Vcity._m.on(this.input,'focus',function(){
that.input.select();
if(that.input.value == '城市名') that.input.value = '';
});
Vcity._m.on(this.input,'blur',function(){
if(that.input.value == '') that.input.value = '城市名';
});
Vcity._m.on(this.input,'keyup',function(event){
event = event || window.event;
var keycode = event.keyCode;
Vcity._m.addClass('hide',that.cityBox);
that.createUl(iestr);
/* 移除iframe 的hide 样式 */
Vcity._m.removeClass('hide',that.myIframe);
// 下拉菜单显示的时候捕捉按键事件
if(that.ul && !Vcity._m.hasClass('hide',that.ul) && !that.isEmpty){
that.KeyboardEvent(event,keycode);
}
});
},
/* *
* 生成下拉选择列表
* @ createUl
* */
createUl:function (iestr) {
if(!iestr){
return;
}
//console.log('createUL');
var str;
var value = Vcity._m.trim(this.input.value);
// 当value不等于空的时候执行
if (value !== '') {
var reg = new RegExp("^" + value + "|\\|" + value, 'gi');
var searchResult = [];
/* *
*【修改5】
* 这里原本是遍历Vcity.allCity，现在改用citylist
* zcx 2016-5-17
*/
for (var i = 0; i < iestr.length; i++) {
if (reg.test(iestr[i])) {
var match = Vcity.regEx.exec(iestr[i]);
if (searchResult.length !== 0) {
str = '<li><b class="cityname">' + match[1] + '</b><b class="cityspell">' + match[2] + '</b></li>';
} else {
str = '<li class="on"><b class="cityname">' + match[1] + '</b><b class="cityspell">' + match[2] + '</b></li>';
}
searchResult.push(str);
}
}
this.isEmpty = false;
// 如果搜索数据为空
if (searchResult.length == 0) {
this.isEmpty = true;
str = '<li class="empty">对不起，没有找到数据 "<em>' + value + '</em>"</li>';
searchResult.push(str);
}
// 如果slideul不存在则添加ul
if (!this.ul) {
var ul = this.ul = document.createElement('ul');
ul.className = 'cityslide';
this.rootDiv && this.rootDiv.appendChild(ul);
// 记录按键次数，方向键
this.count = 0;
} else if (this.ul && Vcity._m.hasClass('hide', this.ul)) {
this.count = 0;
Vcity._m.removeClass('hide', this.ul);
}
this.ul.innerHTML = searchResult.join('');
/* IE6 */
this.changeIframe();
// 绑定Li事件
this.liEvent();
}else{
Vcity._m.addClass('hide',this.ul);
Vcity._m.removeClass('hide',this.cityBox);
Vcity._m.removeClass('hide',this.myIframe);
this.changeIframe();
}
},
/* IE6的改变遮罩SELECT 的 IFRAME尺寸大小 */
changeIframe:function(){
if(!this.isIE6)return;
this.myIframe.style.width = this.rootDiv.offsetWidth + 'px';
this.myIframe.style.height = this.rootDiv.offsetHeight + 'px';
},
/* *
* 特定键盘事件，上、下、Enter键
* @ KeyboardEvent
* */
KeyboardEvent:function(event,keycode){
var lis = Vcity._m.$('li',this.ul);
var len = lis.length;
switch(keycode){
case 40: //向下箭头↓
this.count++;
if(this.count > len-1) this.count = 0;
for(var i=0;i<len;i++){
Vcity._m.removeClass('on',lis[i]);
}
Vcity._m.addClass('on',lis[this.count]);
break;
case 38: //向上箭头↑
this.count--;
if(this.count<0) this.count = len-1;
for(i=0;i<len;i++){
Vcity._m.removeClass('on',lis[i]);
}
Vcity._m.addClass('on',lis[this.count]);
break;
case 13: // enter键
this.input.value = Vcity.regExChiese.exec(lis[this.count].innerHTML)[0];
Vcity._m.addClass('hide',this.ul);
Vcity._m.addClass('hide',this.ul);
/* IE6 */
Vcity._m.addClass('hide',this.myIframe);
break;
default:
break;
}
},
/* *
* 下拉列表的li事件
* @ liEvent
* */
liEvent:function(){
var that = this;
var lis = Vcity._m.$('li',this.ul);
for(var i = 0,n = lis.length;i < n;i++){
Vcity._m.on(lis[i],'click',function(event){
event = Vcity._m.getEvent(event);
var target = Vcity._m.getTarget(event);
that.input.value = Vcity.regExChiese.exec(target.innerHTML)[0];
Vcity._m.addClass('hide',that.ul);
/* IE6 下拉菜单点击事件 */
Vcity._m.addClass('hide',that.myIframe);
});
Vcity._m.on(lis[i],'mouseover',function(event){
event = Vcity._m.getEvent(event);
var target = Vcity._m.getTarget(event);
Vcity._m.addClass('on',target);
});
Vcity._m.on(lis[i],'mouseout',function(event){
event = Vcity._m.getEvent(event);
var target = Vcity._m.getTarget(event);
Vcity._m.removeClass('on',target);
})
}
}
}更多多城市选择器实现代码请关注PHP中文网（www.php.cn）其它文章！
Pengenalan kepada penggunaan pelayan ftp
Bagaimana untuk mendapatkan nombor input dalam java
Apakah pangkalan data bukan hubungan?
Bagaimana untuk merujuk css dalam html
Bagaimana untuk bertukar antara sistem dwi Huawei
Penggunaan arahan zip mampatan Linux
Lapan fungsi yang paling biasa digunakan dalam excel
js mendapat masa semasa
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
