example.js

var SearchForm = {
    _phrases: {
        returnTicketNotNeeded: 'Return ticket is not needed',
        allResorts: 'Все курорты',
        allHotels: 'Все отели',
        chooseTime: 'Указать время',
    },
    setPhrase: function (id, text) {
        this._phrases[id] = text;
        return this;
    },
    getPhrase: function (id) {
        return undefined == this._phrases[id] ? '' : this._phrases[id];
    },
    _domObjects: {
        $currentForm: null,
        $where: null,
        $commonAutocomplete: null,
        $commonDateChoseBox: null,
    },
    _init: {
        domObjects: function () {
            SearchForm._domObjects.$where = $('.search-form-where');
            SearchForm._domObjects.$commonAutocomplete = $('input.autocomplete-box');
            SearchForm._domObjects.$commonDateChoseBox = $('.date-chose-box');
        },
        view: function () {
            this._guests.init();
            this._initCommonDateChoseBoxs();
            this._whereAutocomplete();
            this._initCommonAutocomplete();
        },
        _whereAutocomplete: function () {
            if (SearchForm._domObjects.$where.length) {
                $.widget("custom.catcomplete", $.ui.autocomplete, {
                    _create: function () {
                        this._super();
                        this.widget().menu("option", "items", "> :not(.ui-autocomplete-category)");
                    },
                    _renderMenu: function (ul, items) {
                        var that = this,
                            currentCategory = "";
                        $.each(items, function (index, item) {
                            var li;

                            if (item.category != currentCategory) {
                                ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
                                currentCategory = item.category;
                            }

                            li = that._renderItemData(ul, item);

                            if (item.category) {
                                li.attr("aria-label", item.category + " : " + item.label);
                            }
                        });
                    },
                    _renderItem: function (ul, item) {
                        return $("<li></li>").data("item.autocomplete", item).append("<a>" + item.label + "</a>").appendTo(ul);
                    }
                });
                SearchForm._domObjects.$where.each(function() {
                    var action = $(this).data('action') != undefined ? $(this).data('action') : '/index/mainsearchformautocomplete';
                    $(this).catcomplete({
                        source: action,
                        minLength: 2,
                        select: function (event, ui) {
                            var regionId = ui.item['region_id'],
                                hotelId = ui.item['hotel_id'],
                                countryId = ui.item['country_id'];
                            SearchForm._domObjects.$currentForm.find('input[name="regionId"]').val(regionId);
                            SearchForm._domObjects.$currentForm.find('input[name="hotelId"]').val(hotelId);
                            SearchForm._domObjects.$currentForm.find('input[name="countryId"]').val(countryId);
                        }
                    });
                })
            }

        },
        _initCommonAutocomplete: function() {
            SearchForm._domObjects.$commonAutocomplete.each(function() {
                var self = $(this);
                self.autocomplete({
                    source: self.data('action'),
                    minLength: 1,
                    select: function (event, ui) {
                        var fieldsForSet = self.data('field').split(',');
                        for(var i in fieldsForSet) {
                            var temp = fieldsForSet[i].split(':');
                            SearchForm._domObjects.$currentForm.find('input[name="'+temp[0]+'"]').val(ui.item[temp[1]]);
                        }
                    }
                });
            });
        },
        _initCommonDateChoseBoxs: function () {
            SearchForm._domObjects.$commonDateChoseBox.each(function () {
                var ui = $(this);
                var isStartBox = ui.hasClass('start');
                var input = ui.parents('form').find('input[name="' + ui.data('field') + '"]'),
                    dateFormat = ui.parents('form').data('dateformat');
                dateFormat = undefined == dateFormat ? 'DD.MM.YYYY, dd.' : dateFormat;
                var currentDate = '' == input.val() ? (isStartBox ? moment() : moment().add(1, 'days')) :  moment(input.val(), 'DD.MM.YYYY');
                input.val(currentDate.format('DD.MM.YYYY'));
                ui.datepicker({
                    minDate: new Date(),
                    firstDay: 1,
                    dateFormat: 'dd.mm.yy',
                    onSelect: function (dateText, inst) {
                        var date = moment(dateText, 'DD.MM.YYYY');
                        ui.val(date.format(dateFormat)).removeClass('disabled-for-auto');
                        input.val(date.format('DD.MM.YYYY'));
                        if(isStartBox) {
                            setCheckOutDate(date.add(1, 'days'), ui, dateFormat);
                        }

                    },
                    beforeShow: function () {
                        var temp = ui.val().split(',');
                        ui.datepicker("setDate", temp[0]);
                    },
                }).val(currentDate.format(dateFormat));
            });
            function setCheckOutDate(date, ui, dateFormat) {
                ui = ui.parents('form').find('.search-form-check-out');
                if(!ui.length || ui.hasClass('disabled-for-auto'))
                    return 0;
                ui.parents('form').find('input[name="' + ui.data('field') + '"]').val(date.format('DD.MM.YYYY'));
                ui.datepicker("setDate", date.format('DD.MM.YYYY'));
                ui.datepicker('option', 'minDate', date.format('DD.MM.YYYY'));
                ui.val(date.format(dateFormat));
                setTimeout(function() {
                    ui.datepicker('show');
                }, 300);

            }
        },
        _guests: {
            inputs: {
                'adults': {html: '<span class="span-active-block-adults quest_image image_adult">{score}</span>', selector: 'input[name="adults"]'},
                'childrens': {html: '<span class="span-active-block-childrens quest_image image_children">{score}</span>', selector: 'input[name="children"]'},
                'infants': {html: '<span class="span-active-block-infants quest_image image_baby">{score}</span>', selector: 'input[name="infants"]'},
                'baggage': {html: '<span class="span-active-block-baggage quest_image image_baby image_baggage">{score}</span>', selector: 'input[name="baggage"]'},

            },
            setScore: function (formBox, score, type) {
                var spanHtml = '';
                score = parseInt(score) || 0;
                formBox.find(this.inputs[type].selector).val(score);
                formBox.find('.span-active-block-' + type).remove();
                for ($i = 0; $i < score; $i++) {
                    spanHtml = this.inputs[type].html.replace('{score}', '');
                    formBox.find('.active-guests-block').append(spanHtml);
                }
                formBox.find('.count_' + type).html(score);
            },
            removeKid: function(ui) {
                var self = this;
                var age = $(ui).parent().find('.kid_age').data('age'),
                    ages = $(ui).parents('.quest_form').find('.ages');
                console.log(age);
                var agesVal = ages.val();
                if (agesVal == undefined || agesVal == ''){
                    ages.val('');
                    self.setScore(ages.parents('form'), 0, 'childrens');
                } else {
                    var agesArray = agesVal.split(',');
                    for (var key in agesArray) {
                        if (agesArray[key] == age) {
                            agesArray.splice(key, 1);
                            break;
                        }
                    }
                    self.setScore(ages.parents('form'), agesArray.length, 'childrens');
                    ages.val(agesArray.join(','));
                }
                $(ui).parent().remove();
            },
            init: function () {
                var self = this;
                $('.increase-box').click(function() {
                    var ui = $(this);
                    var namespace = ui.parent().data('namespace');
                    obj = ui.parent().find('.count_' + namespace);
                    currentVal = parseInt(obj.html());
                    newVal = ui.hasClass('minus') ? currentVal - 1 : currentVal + 1;
                    if(newVal <= 0) {
                        newVal = 'adults' == namespace ? 1 : 0;
                    }

                    self.setScore(ui.parents('form'), newVal, namespace);
                });
                $(".ages_select").on('change',function() {
                    var ui = (this);
                    if ($(ui).val() == '')
                        return false;

                    var ages = $(ui).parents('.quest_form').find('.ages'),
                        clone = $(ui).parents('.quest_form').find('.kids_clone'),
                        ul = $(ui).parents('ul.kids_counter');
                    var agesVal = ages.val();
                    if (agesVal == undefined || agesVal == ''){
                        ages.val(ui.value);
                        self.setScore(ages.parents('form'), 1, 'childrens');
                    } else {
                        var agesArray = agesVal.split(',');
                        agesArray.push(ui.value);
                        self.setScore(ages.parents('form'), agesArray.length, 'childrens');
                        ages.val(agesArray.join(','));
                    }
                    clone.find('.kid_age').html($(ui).find('option:selected').text());
                    ul.prepend(clone.html());
                    ul.find('li:first .kid_age').data('age', $(ui).val());
                    $(this).val('');
                });
                $("body").on('click', '.remove_kid',function(){
                    var ui = this;
                    self.removeKid(ui);
                });

                $('.flightTypeSelect').click(function() {
                    var ui = $(this);
                    ui.parents('form').find('.flightTypeSelect').removeClass('active');
                    ui.addClass('active');
                    ui.parents('form').find('[name="flightType"]').val(ui.data('type'));
                });
            }
        }
    },
    init: function (currentForm) {
        SearchForm._domObjects.$currentForm =  currentForm;
        this._init.domObjects();
        this._init.view();

        if (this.Transfer) {
            this.Transfer.init();
        }
        if (this.AgentHotelForm) {
            this.AgentHotelForm.init();
        }
        if (this.Flight) {
            this.Flight.init();
        }

    },
    callbackSubmitForm: function(form) {

        form = $(form);
        var requiredFields = form.data('required').split(','), isValid = true;
        for(var i in requiredFields) {
            var field = form.find('[name="' + requiredFields[i] + '"]');
            if(!field.length || '' == field.val()) {
                isValid = false;
                break;
            }
        }
        if(!isValid) {
            form.effect('shake', {distance: 3, times: 10});
            return false;
        } else {
            form.find('.button_block button').attr('disabled', 'disabled').parent().addClass('disable');
            form.find('.progress-button').progressInitialize();
        }
    },
    updateSelectboxField : function(ui,params,select) {
        var box = ui.parents('form');
        box.find('.loader').show();
        $.post(params['url'], params['data'], function(data) {
            select.empty().append(data);
            select.selectBox('refresh');
            select.trigger('change');
            box.find('.loader').hide();
        });
    },
    updateChosen: function(ui, params, select) {
        ui = $(ui);
        $.post(ui.data('action'), params, function(data) {
            select.empty().append(data)
                .trigger("chosen:updated")
                .trigger("change");
        });
    },
    storeTab: function(namespace, params) {
        params = params || {};
        Helper.setCookie('currentTab', JSON.stringify({namespace: namespace, params: params}));
    },
    _getOptionLists: function(data) {
        var options = '';
        for(var key in data) {
            options += '<option value="' + key + '">' + data[key] + '</option>';
        }
        return options;
    }
};
$(function() {
    $('.ages').val("");
    $('html').click(function (e) {
        if ($('.quest').filter(':visible').length && undefined != e.pageX) {
            var box = $('.quest').filter(':visible'), ui = $('.quest_form').filter(':visible');
            var offset = box.offset(),
                width = ui.width(),
                height = box.height() + ui.height();
            if (!(
                    e.pageX >= offset.left
                    && e.pageX <= (offset.left + width)
                    && e.pageY >= offset.top
                    && e.pageY <= (offset.top + height)
                )) {
                ui.hide();
            }
        }
    });
})