JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.css">
<table><tr><td>
    <label for="select1">Using Chosen#result_select method</label>        
</td><td>
    <select id="select1" class="first" multiple>
        <option value="1">abc</option>
        <option value="2">def</option>
        <option value="3">ghi</option>
    </select>       
</td></tr><tr><td>
    <label for="select2">Using other means...</label>
</td><td>
    <select id="select2" class="second"  multiple>
        <option value="1">abc</option>
        <option value="2">def</option>
        <option value="3">ghi</option>
    </select>
</td></tr></table>

CSS

body {
    margin: 10px;
}

select {
    width: 200px;
}

tr > td:first-child {
    text-align: right;
    padding-right: 7px;
}

JavaScript

//This makes chosen select the first matching result from the list
//if you wrote anything on the input element (and it matches
//anything). 
$('select').chosen();
    
$container1 = $('#select1').next();
$('input', $container1).change(function() {
    var value = $('.active-result:first', $container1).text();
    if (value !== undefined) {
        $('#select1').data('chosen').result_select(value);
    }
});

//Alternatively you could achieve the same with something like
//this, but it's getting a bit complicated:
var $container2 = $('#select2').next();
$('input', $container2).change(function() {
    var option_index = $('.chosen-container .active-result:first').data("option-array-index");
    if (option_index !== undefined) {
        var option_value = $('#select2 option:nth-child('+(option_index+1)+')').val();
        $('#select2').val(option_value);
        $('#select2').trigger("chosen:updated");
    }
});