<form>
<label for="mySelect">Choose a country:</label><br>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for a country..">
<select id="mySelect" onchange="myFunction()">
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AO">Angola</option>
<option value="AI">Anguilla</option>
<option value="AQ">Antarctica</option>
<option value="AG">Antigua and Barbuda</option>
</select>
</form>
<script>
function myFunction() {
var input = document.getElementById("myInput").value;
var select = document.getElementById("mySelect");
var options = select.options;
for (var i = 0; i < options.length; i++) {
var option = options[i];
if (option.text.toUpperCase().indexOf(input.toUpperCase()) > -1) {
option.style.display = "";
} else {
option.style.display = "none";
}
}
}
</script>