JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/css/bootstrap-select.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/js/bootstrap-select.js"></script>
<a href="#" id="link">Click me</a>

<div id="searchSelect">
  <select name="searchName" id="idSelect" data-live-search="true" data-size="10">
    <option value="">ALL</option>
    <option value="Tom">Tom</option>
    <option value="John">John</option>
    <option value="Janet">Janet</option>
  </select>
</div>

CSS

#searchSelect {
  z-index: 999;
  position: absolute;
  display: ;
}

.bootstrap-select.btn-group .dropdown-toggle,
.bootstrap-select.btn-group .dropdown-toggle:hover,
.bootstrap-select.btn-group .dropdown-toggle:active,
.bootstrap-select.btn-group .dropdown-toggle:focus {
  background: none !important;
   border: none !important;
   outline: 0px;
   box-shadow: none;
}

.bootstrap-select.btn-group .caret {
  display: none;
}

#searchSelect .btn.dropdown-toggle {
  height:0px;
  padding:0px;
}

.bootstrap-select.btn-group .filter-option {
  display: none !important;
}

JavaScript

$("#idSelect").selectpicker();

	$("#link").click(function(e) {
	  e.preventDefault();
	  $('#idSelect').selectpicker('toggle');

	});

	$("#idSelect").change(function() {

	  $("#searchSelect").hide();
	  $('#idSelect').selectpicker('toggle');

	});