JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://selectric.js.org/jquery.selectric.js"></script>
<link rel="stylesheet" href="http://selectric.js.org/selectric.css">
<select>
  <option disabled selected>Choose an option</option>
  <option>Cool option</option>
  <option>even cooler option</option>
</select>

CSS

.autocomplete { position: absolute; top: 10px; left: 10px; }

JavaScript

var mySelect = $('select').selectric({

	onInit: function(){
  	var input = "<input type='text' class='autocomplete' placeholder='Search...' style='display:none' />";
    
    var parent = $(this).parents(':eq(1)');


    parent.append(input);
  },

	onBeforeOpen: function() {

		//hide label
		$(this).parents(':eq(1)').find('span.label').hide();
    
    //show input
    var parent = $(this).parents(':eq(1)');
    
    parent.find('.autocomplete').show();
  },
  
  onClose: function() {

		//show label
    $(this).parents(':eq(1)').find('span.label').show();
    
    //hide input
    var parent = $(this).parents(':eq(1)');
    
    parent.find('.autocomplete').hide();
    
  }
});