Js ile select option filtreleme

Selam,

İç içe select boxlarım var.
ilk select boxdan bir select işlemi yaptırıp alt kategorilerini seçtiriyorum.

İlk select box içerisinde çok fazla seçenek olduğu için select boxun hemen üstünde bir input koyup ilk bir iki harf yazdırıcınca seçenekleri filtrelemek istiyorum. Bunu en basit nasıl yaparım?

select2 adında bir js eklentisi var istediğiniz özelliği barındırıyor

kullanımıyla ilgili bilginiz var mı?

Header içerisine

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

Kullanmanız gereken Select için ise

<select class="js-example-basic-single" name="state">
 <option value="1">Hepsi</option>  
<option value="2">Türkiye</option>
<option value="3">Kıbrıs</option>
 </select>

son olarak js için document ready içerisine

$(document).ready(function() {    $('.js-example-basic-single').select2(); });

Select2 kullanın.

İ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.