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:none;}

JavaScript

$("#idSelect").selectpicker();
  
  $("#link").click(function(e) {
  	e.preventDefault();
    $("#searchSelect").show();
  
  });
  
  $("#idSelect").change(function() {
  
   $("#searchSelect").hide();
  
  });