JSFiddle - React, Tailwind, and code Playground

HTML

<input style="display: block" id="Filter">
<select id="cityList">
    <option>Брянск</option>
    <option>Житомер</option>
    <option>Пенза</option>
    <option>Бердянск</option>    
</select>

JavaScript

$("#Filter").keyup(function()
{
    var search_str = this.value.toLowerCase();
    var conc = 0;

    if (($("#cityList").attr("disabled")=="disabled"))
    {
        $("#cityList option[value='-1']").remove();
        $("#cityList").attr("disabled", false);
    }

    $("#cityList option").each(function()
    {
        if (this.text.toLowerCase().indexOf(search_str)==0)
        {
            $(this).toggle(true);
        }
        else
        {
            $(this).toggle(false);
            conc ++;
        }
    });

    if (conc == $("#cityList option").size())
    {
        $("#cityList").append($('<option value="-1">Совпадейний не найдено</option>'));
        $("#cityList").attr("disabled", true);
    }
    
    //здесь пытаюсь выделять первый элемент видимого списка
    $("#cityList :visible:first").attr("selected", "selected");
})