root/public/javascripts/comboBox.js

var ComboBox = Class.create();

ComboBox.Autocompleter = Autocompleter.Local;

ComboBox.Autocompleter.prototype.onBlur = function(event) {
        if (Element.getStyle(this.update, 'display') == 'none') { return; }
        setTimeout(this.hide.bind(this), 250);
        this.hasFocus = false;
        this.active = false;
}


ComboBox.prototype = {
        initialize: function(textElement, resultsElement, array, options) {
                this.textElement = $(textElement);
        
        // the first text box inside the container
        this.textBox = $A( this.textElement.getElementsByTagName('INPUT') ).findAll( function(input) {
            return (input.getAttribute('type') == 'text');
        })[0];
        
        this.results = $(resultsElement);
        this.textBox.paddingRight = '20px';
        this.textElement.style.width = (this.textBox.offsetWidth) + 'px';
        this.textElement.style.position = 'relative';

                // we dynamically insert a SPAN that will serve as the drop-down 'arrow'
        this.arrow = Element.extend(Builder.node('span'));
        Object.extend(this.arrow.style, {
            cursor: 'default',
            backgroundColor: '#ddd',
            color: '#000',
            width: '20px',
            position: 'absolute',
            top: '0',
                        right: '0px',
                        textAlign: 'center',
                        fontSize: 'xx-small',
                        height: (this.textElement.offsetHeight - 2) + 'px'
        });

                if (document.all) {
                        this.arrow.setStyle({ padding: '2px 0 0 3px', width: '18px', height: '17px'});

                }
        this.arrow.innerHTML = '↓';
        this.textElement.appendChild(this.arrow);
            this.array = array;

                this.results.style.display      = 'none';
                
                this.events = {
                        showChoices:        this.showChoices.bindAsEventListener(this),
                        hideChoices:        this.hideChoices.bindAsEventListener(this),
                        click:                          this.click.bindAsEventListener(this),
                        keyDown:                        this.keyDown.bindAsEventListener(this)
                }
                
                this.autocompleter = new ComboBox.Autocompleter(this.textBox, this.results, this.array, options);
                                
                Event.observe(this.arrow, 'click', this.events.click);
                Event.observe(this.textBox, 'keydown', this.events.keyDown);
        },
        
        getAllChoices: function(e) {
                var choices = this.array.collect( function(choice) { return '<li>' + choice + '</li>'; } );
                var html = '<ul>' + choices.join('') + '</ul>';
                this.autocompleter.updateChoices(html);
        },
        
        keyDown: function(e) {
                if (e.keyCode == Event.KEY_DOWN && this.choicesVisible() ) {
                        this.showChoices();
                }
        },
        
        // returns boolean indicating whether the choices are displayed
        choicesVisible: function() { return (Element.getStyle(this.autocompleter.update, 'display') == 'none'); },
        
        click: function() {
                if (this.choicesVisible() ) {
                        this.showChoices();
                } else {
                        this.hideChoices();
                }
        },
                
        showChoices: function() {
                this.textBox.focus();
    this.autocompleter.changed = false;
    this.autocompleter.hasFocus = true;
    this.getAllChoices();
        },
        
        hideChoices: function() {
                this.autocompleter.onBlur();
        }
}