<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dropdown List Search With JS</title>
    <!-- <link rel="stylesheet" href="select2.min.css" />-->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
</head>
<style type="text/css">
    .select2-dropdown {
        top: 12px !important;
        left: 8px !important;
}
</style>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<!-- Select2 JS --> 
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>

<body>

<div id='result'></div>
<form method="post" name="result" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<select id="selected">
	<option value="">Select Country</option>
	<option value="586">Pakistan</option>
	<option value="682">Saudi Arabia</option>
	<option value="784">United Arab Emirates</option>
	<option value="826">United Kingdom</option>
	<option value="840">United States</option>
</select>
</form>

<script src="select2.min.js"></script>
<script>
    $("#selected").select2( {
    width: 200,        
	  placeholder: "Select",
	  allowClear: true
	} );
</script>

</div>
</body>
</html>