JSFiddle - React, Tailwind, and code Playground

by Milan Gladiš

HTML

<input id="input" type="text" />
<select id="select">
  <option value="Montserrat">Montserrat</option>
  <option value="Open Sans">Open Sans</option>
  <option value="Roboto">Roboto</option>
    <option value="Sunflower">Sunflower</option>
  <option value="Varela">Varela</option>
  <option value="Varta">Varta</option>
</select>
<span class="current"></span>

CSS

input {
  outline: none;
}

.true {
  border-color: blue;
}

.false {
  border-color: red;
}

JavaScript

$(document).ready(function(){
    deflectEvent = function(event) {
        var noOfListItems = $("#select > option").length-1;
        var curListItem = $("#select")[0].selectedIndex;
        if(event.which == $.ui.keyCode.UP) {
             // Decrement the selection by one, unless that will be less than zero, then go to the last option
            var nextListitem = (curListItem-1 < 0) ? noOfListItems : curListItem-1;
            $("#select")[0].selectedIndex = nextListitem;
            //$("input")[0].val($("#select")[0].val);
            console.log($("#select").val());
            $("input").val($("#select").val());
        }
        if(event.which == $.ui.keyCode.DOWN){
             // Increment the selection by one, unless that will be more than the number of options, then go to the first option
            var nextListitem = (curListItem+1 > noOfListItems) ? 0 : curListItem+1;
            $("#select")[0].selectedIndex = nextListitem;
            $("input").val($("#select").val());
        }
    }
  
    jQuery(function($){
    	$('#input').bind('keydown',deflectEvent);
      $('#select').bind('change',function(){
        $("input").val($("#select").val());
      });
    });
    //jQuery(function($){$('#input').bind('change',searchSelect)});
    
    https://jsfiddle.net/user/fiddles/all/

    searchBox = document.querySelector("#input");
    selectBox = document.querySelector("#select");
		var current = 0;
    searchBox.addEventListener("keydown", function (e) {
        var text = e.target.value; //searchBox value
        var options = selectBox.options; //select options
        for (var i = 0; i < options.length; i++) {
            var option = options[i]; //current option
            var optionText = option.text; //option text ("Somalia")
            var lowerOptionText = optionText.toLowerCase(); //option text lowercased for case insensitive testing
            var lowerText = text.toLowerCase(); //searchBox value lowercased for case insensitive...