JSFiddle - React, Tailwind, and code Playground

by Monika Love Joy

HTML

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Выбор и добавление фруктов</title>

  <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>

  <link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"rel="stylesheet" />
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>
<body>

<div class="ui-widget">
  <h1>Фрукты</h1>
  <form action="" enctype="multipart/form-data" autocomplete="on" accept-charset="utf-8" method="post">
    <label>Ваш любимый фрукт: </label>
    <select id="combobox">
      <option value="" />Выбрать или ввести
      <option />Яблоко
      <option />Груша
    </select>
    <br />
    <br />
    <input type="submit" value="Отправить" />
  </form>
</div>

</body>
</html>

CSS

body {
  font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
  font-size: 1em;
}

h1 {
  text-align: center;
  color: rgb(230, 130, 130);
  text-shadow:  0 0 10px rgba(0,0,0,0.5);
}

.ui-widget {
  text-align: center;
}

select {
  background-color: rgb(130, 230, 130);
  box-shadow:  0 0 10px rgba(0,0,0,0.5);
}

option:first-child {
  background-color: rgb(130, 130, 130);
}

option {
  background-color: rgb(230, 130, 230);
}

.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

jQuery( document ).ready(function( $ ) {
  (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"
        });
      },
 
      _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...