JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<p>Preference Summary<br/>
    Your favourite drink is:<b><Span id="Drink">Unknown</Span></b>
</p>
<div class="ui-widget">
    <label for="Address">Favorite Drink:</label>
    <input id="Address" placeholder='Type Your favorite soda here.' />
    <br/>
    <label for="IdNum">Drink Varient:</label>
    <input id="IdNum" placeholder="Then select which flavor" readonly=true />
</div>In a real live example, the "flavours" would be populated based on the drink selected. 
<br/><p>Notice that the drink goes from unknown to whatever text started the autocomplete sequence instead of what was actually selected. This is because it's always passed in as null instead of the real value selected.</p>

JavaScript

var aDrinks = ['Coke', 'Pepsi'];
var aDrinkFlavors = ['Cherry', 'Vanilla', 'Lime', 'Regular'];
$('#Address').autocomplete({
    source: aDrinks,
    select: drinkSelected,
    change:drinkChanged,
    minLengh: 1
});

function drinkChanged(event, oSelectedItem){
    if(oSelectedItem.item == null){
        $('#Drink').text($('#Address').val());
    }
    else{
        $('#Drink').text(oSelectedItem.item.value);
    }
    
}

function drinkSelected (event, oSelectedItem) {
    //Do some stuff with the selected Data that doesn't matter for this fiddle
    getFlavors();
}

function getFlavors(){
    var defaultOptions = {
        buttons: {Close: function () {$(this).dialog("close");}},
        close: function (event, ui) {$(this).remove();},
        modal: true
    };
    var oDialog = $('<div></div>').dialog(defaultOptions);//.html("Get flavours of given drink via JSON");
    var ajaxOptions = {
        url:'/echo/json/',
        type:'post',
        data: { json:JSON.stringify(aDrinkFlavors) , delay:1},
        complete:function(){oDialog.dialog('close');},
        success:function(aData){ 
            $('#IdNum').autocomplete({source:aData, minLength:0}); 
            $('#IdNum').on('focus click',function(){$('#IdNum').autocomplete('search','');}).click();
        }
    };
    $.ajax(ajaxOptions);
}