JSFiddle - React, Tailwind, and code Playground

by Joe

HTML

<input type="textbox" options="#listBox2" id="__searchit2" class="searchbox">
<div id="__searchitWrapper2" style="display: none; vertical-align: top; overflow: hidden; border: 1px solid rgb(128, 128, 128); position: absolute;">
 <select id="listBox2" style="padding: 5px; margin: -5px -20px -5px -5px;">
  <option>Robinhood</option>
  <option>Rockford</option>
  <option selected="">Rome</option>
  <option>Ronda</option>
  <option>Rondon</option>
  <option>Rondonopolis</option>
  <option>Rongelap</option>
 </select>
</div>

CSS

.dropdown.dropdown-scroll .dropdown-list {
  max-height: 233px;
  overflow-y: auto;
  list-style-type: none;
  padding-left: 10px;
  margin-bottom: 0px;
}

.dropdown-list li {
  font-size: 14px;
  height: 20px;
}

.dropdown-list li>a {
  color: black;
}

.dropdown-list a:hover {
  color: black;
}

.dropdown-list li:hover {
  background-color: lightgray;
}

JavaScript

$(".searchbox").val($("#listBox1 :selected").val());