ractive-ez-combobox/lib/EzSelectBox.html

Ractive Ez UI Combobox

<div class="ez-selectbox {{ class }} {{ type }}"
     class-ez-disabled="disabled"
     style="{{ style }}">

    <div class="ez-selectbox-editor"
         {{#if !disabled}}on-click="@this.handleEditorClick(@event)"{{/if}}>

        {{ > value }}

        <input 
            type="text" 
            value="{{ _state.text }}"
            disabled="{{ disabled }}"
            required="{{ required }}"
            style-width="{{ _state.textWidth }}px"
            on-focus="@this.handleInputFocus(@event)"
            on-blur="@this.handleInputBlur(@event)"
            on-input="@this.handleInputInput(@event)"
            on-keydown="@this.handleInputKeyDown(@event)">

        <span class="ez-selectbox-input-width">{{ _state.text }}</span>

    </div>

    {{#if button }}
    <button class="ez-selectbox-button"
            disabled="{{ disabled }}"
            tabindex="-1"
            on-click="@this.handleButtonClick(@event)">
        <span>&#x25BC;</span>
    </button>
    {{/if}}

    <div class="ez-selectbox-options"
         style="
            {{#if !_state.isActive || !_state.isOpen }}display: none;{{/if}}
            top: {{ _offset.top }}px; 
            left: {{ _offset.left }}px;
            width: {{ _offset.width }}px">
        {{#each @this.filterSelected(_state.options, values, compare) as option }}
            <div class="ez-selectbox-value {{#if ~/compare(option, ~/_state.value) }}ez-selected{{/if}}"
                 on-mousedown="@this.handleOptionMouseDown(@event, option)"
                 on-click="@this.handleOptionClick(@event, option)">
                {{ > content option }}
            </div>
        {{/each}}
    </div>

</div>