JSFiddle - React, Tailwind, and code Playground

by Vineet Kumar

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<div ng-app="DataApp">
    <div ng-contorller="loginCtrl">
        <div class="ui-widget" combo-box1='{}'>
            <label>Your preferred programming language:</label>
            <select id="combobox" ng-model="list-items" ng-options="listItem.lang for listItem in listLang"></select>
        </div>
    </div>
</div>

CSS

.custom-combobox {
    position: relative;
    display: inline-block;
}
.custom-combobox-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-left: -1px;
    padding: 0;
}
.custom-combobox-input {
    margin: 0;
    padding: 5px 10px;

JavaScript

var DataApp = angular.module("DataApp", []);
    DataApp.controller('loginCtrl', loginCtrl);
var loginCtrl = function ($scope) {
    $scope.listLang = [{
        lang: "AppleScript"
    }, {
        lang: "Asp"
    }, {
        lang: "BASIC"
    }, {
        lang: "C"
    }, {
        lang: "C++"
    }, {
        lang: "Clojure"
    }, {
        lang: "COBOL"
    }, {
        lang: "ColdFusion"
    }, {
        lang: "Erlang"
    }];
};

DataApp.directive('comboBox1', function() {

	return {
		restrict  : 'A',
		link: function(scope, element, attrs) {
            $(element).combobox();
			}
	}

});
(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"
            });

            this._on(this.input, {
                autocompleteselect: function (event, ui) {
                    ui.item.option.selected = true;
                    this._trigger("select", event, {
                        item: ui.item.option
                    });
                },

                autocompletechange: "_removeIfInvalid"
            });
        },

       ...