Simple Datalist Search Query for Consecutive Numbers

Simple Datalist Search Query. Datalist autocomplete based on character or numerical order using Javascript & Jquery

by navenoc13

HTML

<input type="text" list="countries" name="mycountry" id="countryInput" />
    <datalist id="countries">
        <option value="India123">India123</option>
        <option value="United States234">United States234</option>
        <option value="United Kingdom412">United Kingdom412</option>
        <option value="Germany523">Germany523</option>
        <option value="France541">France541</option>
        <option value="Israel154">Israel154</option>
    </datalist>

 <p id="res"></p>
 
 <!-- 
 Ex: if you search "12", only "India123" will show, "United Kingdom412" is not included
 
 -->

JavaScript

var initialArray = [];
        initialArray = $('#countries option');
        
        $("#countryInput").keyup(function() {
            var inputVal = $('#countryInput').val();
            var first =  [];
            first = $('#countries option');
            if (inputVal != '') {
                var options = '';
                //alert(first.length);
                for (var i = 0; i < first.length; i++) {
                    if (first[i].value.includes(inputVal) ){
                    		var idx = first[i].value.indexOf(inputVal);
                        //alert(idx);
                        //alert(first[i].value[idx-1]);
                        //alert(isNaN(first[i].value[idx-1]));
                    		if(isNaN(first[i].value[idx-1])){
                        	options += '<option value="' + first[i].value + '" />';
                        }
                        //alert(first[i].value[0]);
                        
                    }
                }
                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;
                
            }
        });