【回忆1314】回忆之目的地搜索

/**
 * @description: 目的地
 * @author: jununx@gmail.com
 * @update: 2014/11/30
 *
 * @param   {string}      ID              给这个控件一个ID，默认自动生成，重绘避免重复生成，如果本页出现多次该控件最好填写不同的ID
 * @param   {json}        city_data       城市列表数据
 * @param   {id/number}   type            获取这个ID的val，产品类型，1机位、2出发地参团、3目的地参团、4自由行
 * @param   {id/string}   associate       获取这个ID的val，关联词，默认空
 * @param   {number}      limit_city      全部城市显示长度控制，默认128
 * @param   {json}        city_callback   点击城市的回调函数，参数返回当前对象
 * @param   {json}        search_callback 点击搜索结果的回调函数，参数返回当前对象
 */

;(function($){

    var methods = {
        init: function(options){
            methods.bindEvent(options, this);
        },
        createDestination: function(options){
            var box = $(‘<div id="‘+options.ID+‘" class="ul-destination"></div>‘);
            return box;
        },
        createDestinationTitle: function(){
            return ‘<h3 class="ul-destination-title">推荐<a class="ul-destination-close">×</a></h3>‘;
        },
        createCityItems: function(options){
            var city_data = options.city_data,
                oCity_type = $(‘#‘+options.type),
                city_type = oCity_type.length ? oCity_type.val() : options.type,
                oCity_associate = $(‘#‘+options.associate),
                city_associate = oCity_associate.length ? oCity_associate.val() : options.associate,
                res = [‘<dl class="ul-destination-item">‘],
                city_group = {},
                keyTypeText = ["", "国内", "国际", "主题"];

            for (var i = 0, len = city_data.length; i < len; i++){
                if((city_data[i].productType.indexOf(city_type) != -1 || city_type == ‘‘)
                    && (city_data[i].associate.indexOf(city_associate) != -1 || city_associate == ‘‘)) {

                    if(typeof city_group[city_data[i].keyType] == ‘undefined‘){
                        city_group[city_data[i].keyType] = [];
                    }
                    city_group[city_data[i].keyType].push(city_data[i]);

                }
            }

            for (var n in city_group){
                res.push(‘<dt>‘+keyTypeText[n]+‘</dt><dd>‘);
                for (var m = 0, limit = 0, lenM = city_group[n].length; m < lenM; m++){
                    limit += this.getStrLen(city_group[n][m].name) + 2;
                    if(limit > options.limit_city) {
                        break;
                    }
                    res.push(‘<a>‘ + city_group[n][m].name + ‘</a>‘);
                }
                res.push(‘</dd>‘);
            }

            return res;
        },
        getStrLen: function (target){
            var s = target.replace(/[^\x00-\xff]/g, "**");
            return s.length;
        },
        searchCity: function(options, This){
            var city_data = options.city_data,
                oCity_type = $(‘#‘+options.type),
                city_type = oCity_type.length ? oCity_type.val() : options.type,
                oCity_associate = $(‘#‘+options.associate),
                city_associate = oCity_associate.length ? oCity_associate.val() : options.associate,
                box = $(‘#‘+options.ID),
                res = [‘<ul class="ul-destination-list">‘],
                res_item = [],
                res_keys = This.val();
            for(var i = 0, len = city_data.length; i < len; i++){
                if((city_data[i].associate.indexOf(city_associate) != -1 || city_associate == ‘‘)
                    && (city_data[i].productType.indexOf(city_type) != -1 || city_type == ‘‘)){

                    if (city_data[i].pinyin.indexOf(res_keys) == 0) {
                        if(res_item.length >= options.search_limit){ break; }
                        res_item.push(‘<li data-name="‘+city_data[i].name+‘"><a>‘+city_data[i].name+‘(‘+city_data[i].pinyin.replace(new RegExp("^"+res_keys, "g"), function($1){
                            return ‘<span class="ul-destination-keys">‘+ $1 +‘</span>‘;
                        })+‘)</a></li>‘);
                        //<span class="ul-destination-count">约‘+city_data[i].quantity+‘条线路</span>
                    } else if (city_data[i].name.indexOf(res_keys) == 0) {
                        if(res_item.length >= options.search_limit){ break; }
                        res_item.push(‘<li data-name="‘+city_data[i].name+‘"><a>‘+city_data[i].name.replace(new RegExp("^"+res_keys, "g"), function($1){
                            return ‘<span class="ul-destination-keys">‘+ $1 +‘</span>‘;
                        })+‘(‘+city_data[i].pinyin+‘)</a></li>‘);
                        //<span class="ul-destination-count">约‘+city_data[i].quantity+‘条线路</span>
                    }

                }
            }
            res.push(res_item.join(‘‘));
            res.push(‘</ul>‘);

            if(res_item.length){
                if(res_keys != ‘‘){
                    box.html(res.join(‘‘)).find(‘.ul-destination-list‘).find(‘a‘).click(function(){
                        options.search_callback($(this));
                        box.hide();
                    });
                }else{
                    this.bindClick(options, box);
                }
            } else {
                box.html(‘<p class="ul-destination-tips">亲，暂时无搜索结果</p>‘);
            }
        },
        bindClick: function(options){
            var aCityItems = methods.createCityItems(options),
                box = $(‘#‘+options.ID);
            if(aCityItems.length > 1){
                box.html(‘<div class="ul-destination-hot">‘+methods.createDestinationTitle(options) + aCityItems.join(‘‘) + ‘</div>‘)
                    // close
                    .find(".ul-destination-close").click(function(){
                        box.hide();
                    }).end()
                    // city callback
                    .find(".ul-destination-item a").click(function(){
                        options.city_callback($(this));
                        box.hide();
                    });
            }else{
                box.html(‘<p class="ul-destination-tips">亲，暂时无搜索结果</p>‘);
            }
        },
        bindEvent: function(options, This){
            var That = this;
            This.click(function(){
                var box = $(‘#‘+options.ID);
                if(!box.length){
                    box = methods.createDestination(options);
                    $(‘body‘).append(box);
                }else{
                    box.show();
                }
                if(This.val() == ‘‘){
                    That.bindClick(options);
                }else{
                    That.searchCity(options, This);
                }
                box.css({
                    "top": This.offset().top + This.outerHeight(),
                    "left": This.offset().left
                });
                return false;
            }).keyup(function(){
                if(This.val() == ‘‘){
                    That.bindClick(options);
                }else{
                    That.searchCity(options, This);
                }
            });

            // document close
            $(document).click(function(event){
                if($(event.target).attr(‘id‘) != options.ID && !$(event.target).parents(‘#‘+options.ID).length){
                    $(‘#‘+options.ID).hide();
                }
            });
        }
    };

    $.fn.Destination = function(options){
        options = $.extend($.fn.Destination.options, options || {});
        return this.each(function(){
            methods.init.call($(this), options);
        });
    };

    $.fn.Destination.options = {
        "ID": "J_Destination"+Math.floor(new Date().getTime()),
        "city_data": [],
        "type": ‘‘,
        "associate": "",
        "limit_city": 128,
        "city_callback": function(){},
        "search_callback": function(){}
    };

})(jQuery);