JSFiddle - React, Tailwind, and code Playground

by gpublio

HTML

<div class="edge-edition">
    <select class="edge-type">
        <option value="">Select...</option>
        <option value="is-composed-by">is-composed-by</option>
        <option value="is-a">is-a</option>
        <option value="belong-to">belong-to</option>
        <option if="last" value="parent">parent</option>
    </select>
</div>
<div class="shower">
    <p>abc</p>
</div>

CSS

.custom-combobox {
    position: relative;
    display: inline-block;
}
.custom-combobox-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-left: -1px;
    padding: 0;
    /* support: IE7 */
    *height: 1.7em;
    *top: 0.1em;
}
.custom-combobox-input {
    margin: 0;
    padding: 0.3em;
}

JavaScript

(function ($) {
    $.widget("custom.combobox", {
        _create: function () {
            this.wrapper = $("<span>").addClass("custom-combobox").insertAfter(this.element);
            this.element.hide();
            this._createAutocomplete();
            this._createShowAllButton();
        },
        _createAutocomplete: function () {
            var selected = this.element.children(":selected"),
                value = selected.val() ? selected.text() : "";
            this.input = $("<input>").appendTo(this.wrapper).val(value).attr("title", "").addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left").autocomplete({
                delay: 0,
                minLength: 0,
                source: $.proxy(this, "_source")
            }).tooltip({
                tooltipClass: "ui-state-highlight"
            });
            var userSelected = this._on(this.input, {
                autocompleteselect: function (event, ui) {
                    ui.item.option.selected = true;
                    this._trigger("select", event, {
                        item: ui.item.option
                    });
                },
                autocompletechange: "_removeIfInvalid"
            });
            $.when.apply(this, userSelected).done(function () {
                $('.custom-combobox-input').focus().click();
            });
        },
        _createShowAllButton: function () {
            var input = this.input,
                wasOpen = false;
            $("<a>").attr("tabIndex", -1).attr("title", "Show All Items").tooltip().appendTo(this.wrapper).button({
                icons: {
                    primary: "ui-icon-triangle-1-s"
                },
                text: false
            }).removeClass("ui-corner-all").addClass("custom-combobox-toggle ui-corner-right").mousedown(function () {
                wasOpen = input.autocomplete("widget").is(":visible");
            }).click(function () {
               ...