多城市选择器实现代码

PHPz

发布时间：2016-12-28 13:40:59

5223人浏览过

来源于php中文网

原创

需求 : 热门城市、列表中的城市都需要在数据库中查询出来后构建列表，并按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获取城市和热门城市

js仿携程网机票城市选择器代码

下载

 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 = [
    '热门城市(支持汉字/拼音)',
    '',
    '热门城市',
    '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',
    ''
];
/* 城市HTML模板 */
/*Vcity._template = [
    '热门城市(支持汉字/拼音)',
    '',
    '热门城市',
    'ABCDEFGH',
    'IJKLMNOP',
    'QRSTUVWXYZ',
    ''
];*/
/* *
 * 城市控件构造函数
 * @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';
                    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' + match[2] + '';
                    } else {
                        str = '' + match[1] + '' + match[2] + '';
                    }
                    searchResult.push(str);
                }
            }
            this.isEmpty = false;
            // 如果搜索数据为空
            if (searchResult.length == 0) {
                this.isEmpty = true;
                str = '对不起，没有找到数据 "' + value + '"';
                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更多多城市选择器实现代码请关注PHP中文网（www.php.cn）其它文章！