JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" name="t" id="t" /></br>    
<select size="3"> 
       <option value="1">value 1</option> 
       <option value="2">value 2</option> 
       <option value="3">value 3</option> 
       <option value="4">value 4</option> 
       <option value="5">value 5</option> 
       <option value="6">value 6</option>
       <option value="7">value 7</option> 
       <option value="8">value 8</option> 
       <option value="9">value 9</option> 
       <option value="10">value 10</option>
    
 <select>

JavaScript

$(document).ready(function (){
    $("#t").keyup(function () {
        roll();                
    });
});


function roll(){
    var $s = $('select');
    var v = $("#t").val();
    var optionTop = $s.find('[value="'+ v +'"]').offset().top;

    var selectTop = $s.offset().top;    
    $s.scrollTop($s.scrollTop() + (optionTop - selectTop));

}