需求 : 热门城市、列表中的城市都需要在数据库中查询出来后构建列表，并按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 -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-u9FA5uf900-ufa2d]+)|(w+)|(w)w*|(d+)$/i;
Vcity.regExChiese = /([u4E00-u9FA5uf900-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 热门城市(支持汉字/拼音)',
'
- ',
'
- 热门城市 ', '
- 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 ', '
热门城市(支持汉字/拼音)
', '- ',
'
- 热门城市 ', '
- ABCDEFGH ', '
- IJKLMNOP ', '
- QRSTUVWXYZ ', '
更多多城市选择器实现代码请关注PHP中文网（www.php.cn）其它文章！
