需求 : 熱門城市、列表中的城市都需要在數(shù)據(jù)庫中查詢出來后構(gòu)建列表，并按a-z排列，輸入字母可以實現(xiàn)查詢。
多城市選擇器實現(xiàn)效果圖：
實現(xiàn)：
1 后臺根據(jù)登錄用戶獲取列表中城市和熱門城市的數(shù)據(jù)
@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 //查詢出系統(tǒng)登陸人所有的所屬區(qū)域名稱
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('提示',"未找到數(shù)據(jù)");
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 根據(jù)百度上的城市選擇組件 新增熱門城市和城市變量
/* *
* ---------------------------------------- *
* 城市選擇組件 v1.0
* Author: zcx
* ---------------------------------------- *
* Date: 2016-05-17
* ---------------------------------------- *
* */
/* *
* 全局空間 Vcity
* */
var Vcity = {};
/* *
* 靜態(tài)方法集
* @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>'
];*/
/* *
* 城市控件構(gòu)造函數(shù)
* @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
* 創(chuàng)建城市BOX HTML 框架
* */
createWarp:function(cwstr,hotStr){
var inputPos = Vcity._m.getPos(this.input);
var p = this.rootDiv = document.createElement('p');
var that = this;
// 設(shè)置DIV阻止冒泡
Vcity._m.on(this.rootDiv,'click',function(event){
Vcity._m.stopPropagation(event);
});
// 設(shè)置點擊文檔隱藏彈出的城市選擇框
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');
// 先設(shè)置全部隱藏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不等于空的時候執(zhí)行
if (value !== '') {
var reg = new RegExp("^" + value + "|\\|" + value, 'gi');
var searchResult = [];
/* *
*【修改5】
* 這里原本是遍歷Vcity.allCity，現(xiàn)在改用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;
// 如果搜索數(shù)據(jù)為空
if (searchResult.length == 0) {
this.isEmpty = true;
str = '<li class="empty">對不起，沒有找到數(shù)據(jù) "<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);
// 記錄按鍵次數(shù)，方向鍵
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);
})
}
}
}更多Multi-city selector implementation code請關(guān)注PHP中文網(wǎng)（www.miracleart.cn）其它文章！
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Grass Wonder Build Guide | Uma Musume Pretty Derby
1 months ago
By Jack chen
Roblox: 99 Nights In The Forest - All Badges And How To Unlock Them
4 weeks ago
By DDD
Uma Musume Pretty Derby Banner Schedule (July 2025)
1 months ago
By Jack chen
RimWorld Odyssey Temperature Guide for Ships and Gravtech
3 weeks ago
By Jack chen
Windows Security is blank or not showing options
1 months ago
By 下次還敢
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
