JSFiddle - React, Tailwind, and code Playground

by vikas kumar

HTML

<div class="ui-widget">
  <label>Your preferred programming language: </label>
  <select id="combobox" style="width:250px;">
    <option value="">Select one...</option>
    <option value="ActionScript">ActionScript</option>
    <option value="AppleScript">AppleScript</option>
    <option value="Asp">Asp</option>
    <option value="BASIC">BASIC</option>
    <option value="C">C</option>
    <option value="C++">C++</option>
    <option value="Clojure">Clojure</option>
    <option value="COBOL">COBOL</option>
    <option value="ColdFusion">ColdFusion</option>
    <option value="Erlang">Erlang</option>
    <option value="Fortran">Fortran</option>
    <option value="Groovy">Groovy</option>
    <option value="Haskell">Haskell</option>
    <option value="Java">Java</option>
    <option value="JavaScript">JavaScript</option>
    <option value="Lisp">Lisp</option>
    <option value="Perl">Perl</option>
    <option value="PHP">PHP</option>
    <option value="Python">Python</option>
    <option value="Ruby">Ruby</option>
    <option value="Scala">Scala</option>
    <option value="Scheme">Scheme</option>
  </select>
</div>
<button id="clearbtn">Clear</button>

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

(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() : "";
      var select = this.element;
      var mywidth = select.width();
      var maxwidth;
      if (mywidth < 200) {
        maxwidth = 200;
      }
      this.input = $("<input id=a_" + select.attr('id') + " style='width:" + mywidth + "px;max-width:" + maxwidth + "px;'>").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"
      });
    },
    _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
       ...