JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id=my_autocomplete>
<select id=my_select>
    <option>20</option>
    <option>21</option>
    <option>22</option>
    <option>23</option>
    <option>24</option>
    <option>25</option>
    <option>26</option>
    <option>27</option>
    <option>28</option>
    <option>29</option>
    <option>30</option>
</select>

JavaScript

var options = new Array;

// Get all available autocomplete options from the contents
// of the select
$('#my_select option').each(function() {

   options.push($(this).text())
});

// Inintialize the text input with jQuery UI autocomplete
$('#my_autocomplete').autocomplete({
    source: options,
    select: update_select
});

// Function us run when a auto-complete option is selected
function update_select(e, obj) {

    // "deselect" previously selected option
    $('option[selected="selected"]').removeAttr('selected');

    // Iterate through options to select the first with the
    // same contents of the auto-complete selection
    $('#my_select option').each(function() {

        if($(this).val() == obj.item.value)
        {
            $(this).attr('selected', 'selected');
            // After first valid option is selected, exit
            return false;
        }
    });
}