【回忆1314】回忆之城市搜索

/**
 * @description: 出发地
 * @author: jununx@gmail.com
 * @update: 2014/11/30
 *
 * @param {string}      ID                  给这个控件一个ID，默认自动生成，重绘避免重复生成，如果本页出现多次该控件最好填写不同的ID
 * @param {json}        city_hot            热门城市数据
 * @param {json}        city_data           需要分组的城市列表数据
 * @param {function}    hot_callback        点击热门城市的回调，参数返回当前对象
 * @param {function}    city_callback       点击所有城市的回调，参数返回当前对象
 * @param {function}    search_callback     搜索城市点击的回调，参数返回当前对象
 * @param {bool}        isGroup             是否显示分组（默认true）
 * @param {bool}        isSearch            是否显示搜索（默认false）
 */

;(function($){

    var methods = {
        init: function(options){
            var This = this, box_html = ‘‘;
            this.click(function(){
                // 一个页面有多个该控件时先隐藏其他的
                $(‘.ui-departure‘).hide();

                var box = $(‘#‘+options.ID);
                if(!box.length){
                    box = methods.createDeparture(options);
                    $(‘body‘).append(box);
                }else{
                    box.show();
                }

                box_html = methods.createDepartureTitle(options) + methods.createHotCity(options);
                if(options.isSearch){
                    box_html += methods.createSearch();
                }
                if(options.isGroup){
                    box_html += methods.createCityItems(options);
                }

                box
                    .css({
                        "top": This.offset().top + This.outerHeight(),
                        "left": This.offset().left
                    })
                    .html(box_html);

                methods.bindEvent(options);

                return false;
            });
        },
        createDeparture: function(options){
            var res = $(‘<div id="‘+options.ID+‘" class="ui-departure"></div>‘);
            return res;
        },
        createDepartureTitle: function(){
            return ‘<h3 class="ul-departure-title">热门出发城市<a class="ul-departure-close">×</a></h3>‘;
        },
        createHotCity: function(options){
            var res = [‘<div class="ui-departure-hot">‘], city_hot = options.city_hot;
            for (var i = 0, len = city_hot.length; i < len; i++) {
                if(city_hot[i].name == ‘全国‘){
                    res.push(‘<a class="ui-departure-special">‘+ city_hot[i].name +‘</a>‘);
                }else {
                    res.push(‘<a>‘+ city_hot[i].name +‘</a>‘);
                }

            }
            res.push(‘</div>‘);
            return res.join(‘‘);
        },
        createCityItems: function(options){
            var res = [‘<div class="ui-departure-city">‘],
                city_group = {
                    "A-G": [],
                    "H-L": [],
                    "M-T": [],
                    "W-Z": []
                },
                city_data = options.city_data;

            // 城市分组
            for (var i = 0, len = city_data.length; i < len; i++) {
                if (/^[abcdefg]/.test(city_data[i].code.toLowerCase())){
                    city_group[‘A-G‘].push(‘<a>‘+ city_data[i].name +‘</a>‘);
                }
                else if (/^[hijkl]/.test(city_data[i].code.toLowerCase())){
                    city_group[‘H-L‘].push(‘<a>‘+ city_data[i].name +‘</a>‘);
                }
                else if (/^[mnopqrst]/.test(city_data[i].code.toLowerCase())){
                    city_group[‘M-T‘].push(‘<a>‘+ city_data[i].name +‘</a>‘);
                }
                else if (/^[wxyz]/.test(city_data[i].code.toLowerCase())){
                    city_group[‘W-Z‘].push(‘<a>‘+ city_data[i].name +‘</a>‘);
                }
            }

            for (var n in city_group) {
                if(city_group[n].length){
                    res.push(‘<dl><dt>‘+n+‘</dt>‘);
                    res.push(‘<dd>‘+city_group[n].join(‘‘)+‘</dd>‘);
                    res.push(‘</dl>‘);
                }
            }

            res.push(‘</div>‘);

            return res.join(‘‘);
        },
        createSearch: function(){
            var res = [‘<div class="ui-departure-search">‘,
                ‘<label class="ui-departure-search-label">输入出发城市</label>‘,
                ‘<input class="ui-departure-search-text" type="text"/>‘,
                ‘<div class="ui-departure-search-result">‘,‘</div>‘,‘</div>‘];

            return res.join(‘‘);
        },
        /**
         * 在城市数据里查找符合val的城市
         * @param data      {object}  特定格式
         * @param val       {string}
         * @param maxLen    {number}  返回的数组最多几项
         *
         * @return {array} 返回符合条件的数组
         */
        searchCity: function(data, val, maxLen){
            var res = [], city_data = data, thisVal = $.trim(val);
            for (var i = 0, len = city_data.length; i < len; i++) {
                if((/^[\u4e00-\u9fa5]+$/.test(thisVal) && city_data[i].name.indexOf(thisVal) === 0) ||
                    (/^[a-zA-Z]+$/.test(thisVal) && city_data[i].code.indexOf(thisVal) === 0) ||
                    (/^[a-zA-Z]+$/.test(thisVal) && city_data[i].pinyin.indexOf(thisVal) === 0)){
                    res.push(city_data[i].name);
                    if(res.length >= maxLen) {
                        break;
                    }
                }
            }

            return res;
        },
        bindEvent: function(options){
            var box = $(‘#‘+options.ID);
            box
                // close
                .find(".ul-departure-close").click(function(){
                    box.hide();
                }).end()
                // hot city callback
                .find(".ui-departure-hot a").click(function(){
                    options.hot_callback($(this));
                    box.hide();
                }).end()
                // search city
                .find(".ui-departure-search-text").keyup(function(){
                    var thisVal = $(this).val(), searchResultCity = methods.searchCity(options.city_data, thisVal, 2);
                    if(searchResultCity.length){
                        box.find(‘.ui-departure-search-result‘).html(‘<a>‘+ searchResultCity.join(‘</a><a>‘) +‘</a>‘).find(‘a‘).click(function(){
                            options.search_callback($(this));
                            box.hide();
                        }).end().show();
                    }else{
                        if(thisVal == ‘‘){
                            box.find(‘.ui-departure-search-result‘).hide();
                        }else{
                            box.find(‘.ui-departure-search-result‘).text(‘亲，暂时无搜索结果‘).show();
                        }
                    }

                }).end()
                // city callback
                .find(".ui-departure-city a").click(function(){
                    options.city_callback($(this));
                    box.hide();
                });
            // document close
            $(document).click(function(e){
                if($(e.target).attr(‘id‘) != options.ID && !$(e.target).parents(‘#‘+options.ID).length){
                    box.hide();
                }
            });
        }
    };

    $.fn.Departure = function(options){

        options = $.extend({
            "ID": "J_Departure"+Math.floor(new Date().getTime()),
            "isGroup": true,
            "isSearch": false,
            "city_hot": [],
            "city_data": [],
            "hot_callback": function(){},
            "city_callback": function(){},
            "search_callback": function(){}
        }, options || {});

        return this.each(function(){
            methods.init.call($(this), options);
        });

    };

})(jQuery);