JSFiddle - React, Tailwind, and code Playground

by Prabhat Agarwal

HTML

<div>
    <div>
        <input type="text" id="search" name="search" style="margin: 10px;width: 165px;" onkeyup="filter()">
    </div>
    <div>
        <select id="select" size="10" style="margin: 10px; width: 165px;height: 170px;">
            <option>Cupcake</option>
            <option>Cunut</option>
            <option>Eclair</option>
            <option>Froyo</option>
            <option>Gingerbread</option>
            <option>Honeycomb</option>
            <option>Ice Cream Sandwich</option>
            <option>Jelly Bean</option>
            <option>KitKat</option>
            <option>Lollipop</option>
            <option>Marshmallow</option>
            <option>Nougat</option>
            <option>Cupcake</option>
            <option>Donut</option>
            <option>Eclair</option>
            <option>Froyo</option>
            <option>Gingerbread</option>
            <option>Honeycomb</option>
            <option>Ice Cream Sandwich</option>
            <option>Jelly Bean</option>
            <option>KitKat</option>
            <option>Lollipop</option>
            <option>Marshmallow</option>
            <option>Nougat</option>
        </select>
    </div>
</div>

JavaScript

function filter() {
    var keyword = document.getElementById("search").value;
    var fleet = document.getElementById("select");
    for (var i = 0; i < fleet.length; i++) {
        var txt = fleet.options[i].text;
        if (txt.substring(0, keyword.length).toLowerCase() !== keyword.toLowerCase() && keyword.trim() !== "") {
            fleet.options[i].style.display = 'none';
        } else {
            fleet.options[i].style.display = 'list-item';
        }
    }
}