ractive-ez-combobox/lib/EzComboBox.js

Ractive Ez UI Combobox

import Ractive      from 'ractive';
import EzSelectBox  from './EzSelectBox.js';
import './EzComboBox.less';

const EzComboBox = Ractive.components.EzComboBox = EzSelectBox.extend({

    partials: {
        value: require("./EzComboBox.value.html")
    },

    data() {
        return {
            type: "ez-combobox",
            value: null
        }
    },

    oninit() {

        this._super();

        this.observe("value", value => this.preview(value));

        this.on("select", (ctx, value) => {
            if (value != this.get("value")) {
                this.set("value", value);
                this.fire("change", {}, value);
            }
        });
    },

    handleEnterKey(txt, cancel) {
        cancel();
        this.close();
        this.select();
    },

    handleTabKey(txt, cancel) {
        this.select();
    },

    handleDeleteKey(txt, cancel) {
        this.handleBackspaceKey(txt, cancel);
    },

    handleEscapeKey(txt, cancel) {
        this.preview(this.get("value"));
        this._super();
    },

    handleOptionClick(event, option) {
        this._super(event, option);
        this.close();
    }
});

export default EzComboBox;