JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">


</script>
</head>
<body>
<select name="sel_id" id="sel_id">
                            <option value="0">Choose a new fixer...</option>
                             
                                 <optgroup label="Group A">
                                 
                                        <option value="6366">Test User useruser</option>
                                    
                                 </optgroup>
                            
                                 <optgroup label="Group B">
                                 
                                        <option value="5831">First Guy</option>
                                    
                                        <option value="1123">Second Guy</option>
                                    
                                        <option value="7232">Second Second Guy</option>                                                                    
                                 </optgroup>
                            
                        </select><select name="sel_id2" id="sel_id2">
                            <option value="0">Choose a new fixer...</option>
                             
                                 <optgroup label="Group A">
                                 
                                        <option value="6366">Test User useruser</option>
                                    
                                 </optgroup>
                            
                                 <optgroup label="Group B">
                                 
                                        <option value="5831">First Guy</option>
                                    
                                        <option value="1123">Second Guy</option>
                                    
                  ...

JavaScript

var keyup_details = new Array();
var threshHold = 50;

$(document).ready(function(){
$('select').focus(function(e){
 var elem_id = $(this).attr("id");
    if(elem_id in keyup_details){
    //in
    }else{
         keyup_details[elem_id] = new Array();
    }
    for(var eid in keyup_details){
        keyup_details[eid]['active'] = false;
    }
    
    keyup_details[elem_id]['active'] = true;
});
$('select').blur(function(e){
var elem_id = $(this).attr("id");
 
    if(elem_id in keyup_details){
    //in
    }else{
         keyup_details[elem_id] = new Array();
    }
    for(var eid in keyup_details){
        keyup_details[eid]['active'] = false;
    }
});
$(document).keypress(function(){
    var elem_id = null;
    
    for(var e in keyup_details){
        if(keyup_details[e]['active']){
            elem_id = e;
            break;
        }
    }
    if(elem_id == null){
    return;
    }
    
     var time_keyUp = e.timeStamp;
     if(elem_id in keyup_details){
    //in
    }else{
         keyup_details[elem_id] = new Array();
         keyup_details[elem_id]['searchFor'] = '';
     }
     
      keyup_details[elem_id]['lastTyped'] = time_keyUp;
//we've received this event before, build upon the keys already typed if the key up time is greater than threshold
          if((time_keyUp - keyup_details[elem_id]['lastTyped']) < threshHold){
                   keyup_details[elem_id]['searchFor'] += String.fromCharCode(e.keyCode).toLowerCase();
          }else{
                   keyup_details[elem_id]['searchFor'] = String.fromCharCode(e.keyCode).toLowerCase();
          }

    //search for it in this element's option list
          var options = $(this).find("option");
          var foundSelected = false;
          for(var i = 0; i < options.length; i++){
             var opt = $(options[i]);
             if(opt.val() != 0 && opt.text().toLowerCase().indexOf(keyup_details[elem_id]['searchFor']) == 0){
                 $(this).val(opt.val()); //set selected option
     ...