JSFiddle - React, Tailwind, and code Playground

by Jake Wolpert

HTML

<body>
    <select data-val="true" data-val-number="The field CC must be a number." id="ccSelect" name="Requirement.CC">
        <option value="">Select CC</option>
        <option value="10">APN</option>
        <option value="11">OM&amp;N</option>
        <option value="12">PANMC</option>
        <option value="13">NCM</option>
        <option value="14">NAVSEA</option>
        <option value="16">WPN</option>
        <option value="18">PRIVATE PARTY</option>
        <option value="19">NASA</option>
        <option value="20">ARMY</option>
        <option value="21">HILL AFB</option>
        <option value="22">WRIGHT PATTERSON</option>
        <option value="23">STATE DEPARTMENT</option>
        <option value="24">F-18 NACES</option>
        <option value="25">F-18 NON-NACES</option>
        <option value="30">NAVY FMS</option>
        <option value="40">MISC.</option>
    </select>
</body>

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"),
				select: function( event, ui ) {
					console.log(ui)
                    $(ui.item.option).trigger("change")
				}
			}).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"
			});
		},
		_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() {
				input.focus();
				// Close if already visible
				if (wasOpen) {
					return;
				}
				// Pass empty string as value to search for, displaying all results
				input.autocomplete("search", "");
			});
		},
		_source: function(request, response) {
			var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
			response(this.element.children("option").map(function() {
				var text = $(this).text();
				if (this.value && (!request.term ||...