İlk olarak, input alanınızı HTML kodunuzda ekleyin. Daha sonra, JavaScript kodunuzda input alanına bir event listener ekleyin. Bu event listener, kullanıcının girdiği her harf için çalışacaktır.
Event listener içerisinde, input alanındaki değeri alın ve select box içerisindeki tüm seçenekleri dolaşın. Eğer seçeneklerin içinde girdiği değer ile eşleşen bir seçenek varsa, o seçeneği gösterin, aksi halde gizleyin. Bu şekilde, kullanıcı ilk bir iki harf yazdıkça seçenekler arasında filtreleme yapabilir.
Örnek;
<input type="text" id="filterInput">
<select id="mySelect">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
</select>
<script>
// input alanına event listener ekle
document.getElementById("filterInput").addEventListener("input", filterOptions);
function filterOptions() {
// input alanındaki değeri al
var filterValue = document.getElementById("filterInput").value.toLowerCase();
// select box içerisindeki tüm seçenekleri al
var options = document.getElementById("mySelect").options;
for (var i = 0; i < options.length; i++) {
if (options[i].text.toLowerCase().indexOf(filterValue) > -1) {
// eşleşen seçenekleri göster
options[i].style.display = "block";
} else {
// eşleşmeyen seçenekleri gizle
options[i].style.display = "none";
}
}
}
</script>Bu kod, kullanıcının input alanına yazdığı her harf için çalışacaktır. Eğer seçenekler içerisinde girdiği değer ile eşleşen bir seçenek varsa, o seçeneği gösterir, aksi halde gizler.