Double click

component.hbs

<div {{ bind-attr class="placeholderClass :value" }} {{ action "open" }}>
    {{ preview }}
    <i class="icon icon-down"></i>
</div>

{{#if opened}}
<div class="collection">
    <div class="icon-input">
        {{ input value=query class="form-control input-sm" id="custom-select-filter" }}
        <i class="icon icon-search"></i>
    </div>

    <ul>
        {{#each option in options}}
            <li {{ bind-attr class="option.active" }} {{ action 'select' option.label bubbles=false }}>{{ highlight-word option.label queryRegex }}</li>
        {{/each}}
    </ul>

    <hr>

    <div class="custom">Custom...</div>
</div>
{{/if}}

component.js

import Ember from 'ember';

var $ = Ember.$;

export default Ember.Component.extend({

    classNameBindings: [ 'opened' ],
    classNames: [ 'custom-select' ],


    // Properties
    index: null,
    selected: null,
    placeholderClass: 'placeholder',
    opened: false,
    query: '',

    preview: function () {
        if (this.get('selected')) {
            this.set('placeholderClass', '');
            return this.get('selected');
        } else {
            this.set('placeholderClass', 'placeholder');
            return 'Select an organisation...';
        }
    }.property('selected'),

    queryRegex: function () {
        if (!Ember.isEmpty(this.get('query'))) {
            return new RegExp(this.get('query'), 'i');
        }
    }.property('query'),

    options: function () {
        var collection = this.get('collection') || Ember.A(),
            activeIndex = this.get('index'),
            query = this.get('query'),
            options;

        options = collection.sortBy('label').map(function (item, index) {
            return {
                value: item.value,
                label: item.label,
                active: activeIndex === index ? 'active' : ''
            };
        });

        if (!Ember.isEmpty(query)) {
            query = query.toLowerCase();

            options = options.filter(function (item) {
                return item.label.toLowerCase().indexOf(query) > -1;
            });
        }

        return options;
    }.property('collection', 'index', 'query'),


    // Observes
    initEventsOnOpen: function () {
        var self = this;

        if (this.get('opened')) {
            console.log("INIT EVENTS - ADD");

            $('body').on('click.custom-select', function (e) {
                if ($(e.target).closest('.custom-select').size() === 0) {
                    self.send('open');
                }
            });
        } else {
            console.log("INIT EVENTS - REMOVE");

            $('body').off('click.custom-select');
        }
    }.observes('opened'),


    // Methods
    switchActive: function (dir) {
        var index;

        if (!Ember.isEmpty(this.get('index'))) {
            index = this.get('index') + dir;

            if (index > -1 && index < this.get('options.length')) {
                this.set('index', index);
            }
        } else {
            this.set('index', 0);
        }
    },

    resetAttributes: function () {
        console.log('CLOSING');

        this.setProperties({
            opened: false,
            query: null,
            index: null
        });
    },

    eventManager: {
        keyDown: function (e, view) {
            console.log("KEYDOWN");
            var parent = view.get('parentView');

            // Arrow keys
            if (e.keyCode === 38 || e.keyCode === 40) {
                parent.switchActive(e.keyCode - 39);
                e.preventDefault();
            }

            // Enter
            if (e.keyCode === 13) {
                if (!Ember.isEmpty(parent.get('index')) && parent.get('options').objectAt(parent.get('index'))) {
                    parent.set('selected', parent.get('options').objectAt(parent.get('index')).label);
                }

                parent.resetAttributes();
            }

            // Esc
            if (e.keyCode === 27) {
                parent.resetAttributes();
            }
        }
    },

    actions: {
        open: function () {
            console.log('OPEN');
            var self = this;

            this.toggleProperty('opened');

            if (this.get('opened')) {
                Ember.run.next(function () {
                    self.$('#custom-select-filter').focus();
                });
            } else {
                this.resetAttributes();
            }
        },

        select: function (label) {
            console.log('SELECT');

            this.set('selected', label);
            this.resetAttributes();
        }
    }

});