JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
 <select id="MySelect">
  <option>AMERICA</option>
  <option>INDIA</option>
  <option>JAPAN</option>
 </select>

CSS

.ui-combobox-list
{
	display: none;
}

.ui-combobox-toggle.ui-corner-all
{
	border-top-left-radius:0;
	border-bottom-left-radius:0;
	border-top-right-radius:0;
	border-bottom-right-radius:0;
}

.ui-combobox {
	position: relative;
}

.ui-combobox-toggle {
	position: absolute;
	top: -1px;
	bottom: 0;
	right: 0;
	width: 14px;
	height:100%;
	margin-right: 0;
	padding-bottom: 1px;
	/* adjust styles for IE 6/7 */
	*height: 1.7em;
	*top: 0.1em;
}
.ui-combobox-input {

}

.ui-combobox-toggle:hover{
cursor: default;
}

.ui-autocomplete .ui-state-hover
{
    background-color: #3399ff !important;
    background-image: none !important;
    color: White;
}

.ui-autocomplete.ui-menu .ui-menu-item a
{
    padding: 2 0 0 0 !important;
    line-height: 1 !important;
}

.ui-autocomplete.ui-widget
{
    font-family: Sans-Serif !important;
    font-size: 1em !important;
}

.ui-autocomplete.ui-corner-all
{
    border-radius: 0 !important;
}

JavaScript

(function ($) {
    $.widget("ui.combify", {
        options: {
    		capitalizeInput: false,
		maxLength: 0
        },
        _create: function () {
            var self = this,
            select = self.element,
            options = self.options,
            id = select.prop('id'),
            hiddenInputSelector = "#" + id,
            textInputId = "CombifyInput-" + id,
            textInputSelector = "#" + textInputId,
            name = select.prop('name'),
            selectedValue = select.find(':selected').val(),
            selectedText = select.find(':selected').text(),
            selectOptions = select.find('option'),
            optionArray = new Array();

            //Hide the original select
            select.hide();

            //Insert new HTML for a text input and a button to trigger the dropdown
            select.before('<div>' +
                '<span class="ui-combobox">' +
                '<input type="hidden" class="insertedInput" id="' + id + '" name="' + name + '" value="' + selectedValue + '">' +
                '<input type="text" id="' + textInputId + '" class="ui-combobox-input" value="' + selectedText + '">' +
                '<a class="ui-combobox-toggle"></a>' +
                '</span></div>');

            //Remove the the id and name from the original select since they are now on the hidden input so that posted forms will get the correct value
            select.removeAttr('id', null)
            .removeAttr('name', null)
            .on('change', function (event) {
              event.stopPropagation();
          });

            //Get all the options from the select list and put them in an array for use in the autocomplete data source
            selectOptions.each(function (i) {
                optionArray.push($(this).text());
            });

            //Add autocomplete to the new input
            $(textInputSelector).autocomplete({
                source: optionArray,
                select: function (event, ui)...