JSFiddle - React, Tailwind, and code Playground

HTML

<div class="combo">
<label for="state">School: </label>
<input type="text" name="school" id="state" value="None" size="10">
<ul>
<li>DeSoto</li>
<li>Hillsboro</li>
<li>Grandview</li>
<li>Festus</li>
<li>R-7</li>
</ul>
</div>

CSS

.combo {position:relative;width:190px;text-align:left;padding:0;margin:0;}
.combo * {padding:0;margin:0;}
.combo label {display:block;float:left;width:92px;text-align:right;}
.combo input {width:92px; background-color:#cfc;height:1.5em;z-index:0;}
.combo ul {padding:1px;border:2px solid #ccc;width: 89px;background-color:#cfc;position:absolute;right:3px;top:1.5em;display:none;z-index:1;}
.combo li {display:block; width: 100%;}

JavaScript

// Modern Combo Box  Script
// copyright Stephen Chapman, 18th October 2008
// you may copy this script provided that you retain the copyright notice
// you should not need to alter the below code

function combo(id, h, l) {
    var self = this;
    self.h = h;
    self.l = l;
    self.inp = document.getElementById(id);
    self.hasfocus = false;
    self.sel = -1;
    self.ul = self.inp.nextSibling;
    while (self.ul.nodeType == 3) self.ul = self.ul.nextSibling;
    self.ul.onmouseover = function() {
        self.ul.className = '';
    };
    self.ul.onmouseout = function() {
        self.ul.className = 'focused';
        if (!self.hasfocus) self.ul.style.display = 'none';
    };
    self.list = self.ul.getElementsByTagName('li');
    for (var i = self.list.length - 1; i >= 0; i--) {
        self.list[i].onclick = function() {
            self.inp.value = this.firstChild.data;
            self.rset(self);
        }
    }
    self.inp.onfocus = function() {
        self.ul.style.display = 'block';
        self.ul.className = 'focused';
        self.hasfocus = true;
        self.sel = -1;
    };
    self.inp.onblur = function() {
        if (self.ul.className == 'focused') {
            self.rset(self);
        }
        self.ul.className = '';
        self.hasfocus = false;
    };
    self.inp.onkeyup = function(e) {
        var k = (e) ? e.keyCode : event.keyCode;
        if (k == 40 || k == 13) {
            if (self.sel == self.list.length - 1) {
                self.list[self.sel].style.backgroundColor = self.l;
                self.sel = -1;
            }
            if (self.sel > -1) self.list[self.sel].style.backgroundColor = self.l;
            self.inp.value = self.list[++self.sel].firstChild.data;
            self.list[self.sel].style.backgroundColor = self.h;
        } else if (k == 38 && self.sel > 0) {
            self.list[self.sel].style.backgroundColor = self.l;
            self.inp.value = self.list[--self.sel].firstChild.data;
           ...