JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.9/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.7.2.js"></script>
    <script src="http://code.jquery.com/ui/1.8.9/jquery-ui.js"></script>
Selected property:
<input class="property" readonly="readonly" />
<br/>
<input class="search" />

JavaScript

var properties = ['A', 'B', 'C'];
var values = {};
for (var i = 0; i < properties.length; i++) {
    var key = properties[i];
    values[key] = [key + 1, key + 2, key + 3];
}

$('input.search').autocomplete({
    minLength: 0,
    autoFocus: true,
    source: function (request, response) {
        var property = $('input.property').val();
        if (property === '') {
            response(properties);
        } else {
            response(values[property]);
        }
    },
    select: function (event, ui) {
        var property = $('input.property');
        if (property.val() === '') {
            // Switch to property value selection
            property.val(ui.item.value);
            $('input.search').val('').autocomplete('search')
            return false;
        }

        return true;
    }
});