JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" list="countries" name="mycountry" id="countryInput" />
    <datalist id="countries">
        <option value="India">India</option>
        <option value="United States">United States</option>
        <option value="United Kingdom">United Kingdom</option>
        <option value="akushdu">akushdu</option>
        <option value="akdhe">akhde</option>
        <option value="kkjejjeaaaa">kkjejjeaaaa</option>
        <option value="aksjjhe">aksjjhe</option>
        <option value="Germany">Germany</option>
        <option value="France">France</option>
        <option value="Israel">Israel</option>
    </datalist>

JavaScript

var initialArray = [];
        initialArray = $('#countries option');
        $("#countryInput").keyup(function() {
            var inputVal = $('#countryInput').val();
            var first =  [];
            first = $('#countries option');
            if (inputVal != '' && inputVal!= 'undefined') {
                var options = '';
                for (var i = 0; i < first.length; i++) {
                    if (first[i].value.toLowerCase().startsWith(inputVal.toLowerCase())) {
                        options += '<option value="' + first[i].value + '" />';
                    }
                }
                document.getElementById('countries').innerHTML = options;
            }
            else
            {
                var options = '';
                for (var i = 0; i < initialArray.length; i++) {
                    options += '<option value="' + initialArray[i].value + '" />';
                }
                document.getElementById('countries').innerHTML = options;
            }
        });