JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<div> 
        <label for="country">Country</label> 
        <select name="country" id="country" class="editable-select"> 
          <option>Denmark</option> 
          <option selected="selected">Sweden, selected</option> 
          <option>Norway</option> 
          <option>Finland</option> 
          <option>Iceland</option> 
        </select> 
      </div> 
      <div> 
        <label for="name">Names</label> 
        <select name="name" id="name" class="editable-select"> 
          <option>Al</option> 
          <option>Anders</option> 
          <option selected="selected">Andy, selected</option> 
          <option>Brad</option> 
          <option>Fred</option> 
          <option>George</option> 
          <option>Jennifer</option> 
          <option>Matt</option> 
          <option>Niklas</option> 
          <option>Nicole</option> 
          <option>Susan</option> 
        </select> 
      </div>

CSS

input.editable-select {
  background: #FFF;
  padding-right: 13px;
}
.editable-select-options {
  position: absolute;
  display: none;
  overflow: auto;
  margin: 0;
  padding: 0;
  background: #FFF;
  border: 1px solid #CCC;
  z-index: 10;
}
.editable-select-iframe {
  position: absolute;
  background: #FFF;
  z-index: 9;
  display: none;
}
  .editable-select-options ul {
    margin: 0;
    padding: 0;
    z-index: 10;
    list-style: none;
    list-style-image: none;
  }
    .editable-select-options li {
      cursor: default;
      padding: 2px;
    }
    .editable-select-options li.selected {
      background: #EAEAEA;
    }

JavaScript

/**
 * Copyright (c) 2009 Anders Ekdahl (http://coffeescripter.com/)
 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
 *
 * Version: 1.3.1
 *
 * Demo and documentation: http://coffeescripter.com/code/editable-select/
 */
(function($) {
  var instances = [];
  $.fn.editableSelect = function(options) {
    var defaults = { bg_iframe: false,
                     onSelect: false,
                     items_then_scroll: 10,
                     case_sensitive: false
    };
    var settings = $.extend(defaults, options);
    // Only do bg_iframe for browsers that need it
    if(settings.bg_iframe && !$.browser.msie) {
      settings.bg_iframe = false;
    };
    var instance = false;
    $(this).each(function() {
      var i = instances.length;
      if(!$(this).data('editable-selecter')) {
        instances[i] = new EditableSelect(this, settings);
        $(this).data('editable-selecter', i);
      };
    });
    return $(this);
  };
  $.fn.editableSelectInstances = function() {
    var ret = [];
    $(this).each(function() {
      if(!$(this).data('editable-selecter')) {
        ret[ret.length] = instances[$(this).data('editable-selecter')];
      };
    });
    return ret;
  };

  var EditableSelect = function(select, settings) {
    this.init(select, settings);
  };
  EditableSelect.prototype = {
    settings: false,
    text: false,
    select: false,
    wrapper: false,
    list_item_height: 20,
    list_height: 0,
    list_is_visible: false,
    hide_on_blur_timeout: false,
    bg_iframe: false,
    current_value: '',
    init: function(select, settings) {
      this.settings = settings;
      this.select = $(select);
      this.text = $('<input type="text">');
      this.text.attr('name', this.select.attr('name'));
      this.text.data('editable-selecter', this.select.data('editable-selecter'));
      // Because we don't want the value of the select when...