Cacher is the code snippet organizer for pro developers

new InputHint({
  target: 'id',
  type: 'jackpot',
  data: data,
  ajax: ajaxOptions //options to ajax request after choose input
}).show();

;(function() {
    this.InputHint = function() {
        var defaults = {
            target: 'jackpot',
            type: 'jackpot',
            data: {},
            id: 'input-hint'
        }

        this.hint = null;
        this.el = null;
        this.options = extendDefaults(defaults, arguments[0] || {});
    }

    /**
     *
     * private methods
     *
     */
    
     // extend default options
    function extendDefaults(source, properties) {
        for(var prop in properties) {
            if(properties.hasOwnProperty(prop)) {
                source[prop] = properties[prop];
            }
        }

        return source;
    }

    // select from items
    function select(value) {
        var self = this;
        return new Promise(function(resolve, reject) {
            resolve(self.el.getElementsByTagName('input')[0].value = value);
        });
    }   

    // get data after select, data depends on type
    function afterSelect() {
            var ajax = new Ajax(this.options.ajax);

            ajax.send()
                .then(preloader({action: 'show', target: 'form-wrapper'}))
                .then(function(data) {
                    return JSON.parse(data);
                })
                .catch(function(error) {
                    console.error(error);
                })
                .then(function() {
                    preloader({action: 'hide', target: 'form-wrapper'});
                });             
    }   

    // build hint
    function buildHtml() {
        var self = this, rect, docFrag, ul;
        
        docFrag = document.createDocumentFragment();
        this.el = document.getElementById(this.options.target).querySelector('[data-type="'+ this.options.type +'"]');

        rect = this.el.getBoundingClientRect();

        // create hint
        this.hint = document.createElement('div');
        this.hint.setAttribute('id', this.options.id);
        this.hint.className = 'input-hint';
        this.hint.style.width = rect.width + 'px';
        this.hint.style.top = (rect.top + window.pageYOffset) + 'px';
        this.hint.style.left = rect.left + 'px';
        
        // create hint content
        ul = document.createElement('ul');
        ul.className = 'input-hint__content';

        for (var i = this.options.data.length - 1; i >= 0; i--) {
            var li = document.createElement('li');

            li.setAttribute('data-action', 'select-hint');
            li.className = 'input-hint__item';
            li.innerHTML = '<span>' + this.options.data[i].id + ':</span> ' + this.options.data[i].name;

            // add event
            li.addEventListener('click', function() {
                select.call(self, this.textContent)
                    .then(function() {
                        self.close();
                    })
                    .then(function() {
                        afterSelect.call(self);
                    })
                    .catch(function(error) {
                        console.error(error);
                    });
            });            

            ul.appendChild(li);
        }

        this.hint.appendChild(ul);
        docFrag.appendChild(this.hint);

        if(document.getElementById('input-hint')) {
            this.close();
        }

        document.body.appendChild(docFrag);
    }

    // add events
    function initEvents() {

    }

    /**
     *
     * public methods
     *
     */

    InputHint.prototype = {
        show: function() {
            // build hint
            buildHtml.call(this);
        },

        close: function() {
            document.body.removeChild(document.getElementById(this.options.id));
        }
    }
}());