JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://www.scikidus.com/jquery-ui-1.8.9/css/smoothness/jquery-ui-1.8.9.custom.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<table>
    <tr>
        <td><input type="text" class="periodText" size="12"></td>
        <td><input type="text" class="periodText" size="12"></td>
        <td><input type="text" class="periodText" size="12"></td>
    </tr>
</table>

JavaScript

classes = [
    {label: "English", room: "U201"},
    {label: "History", room: "U202"}
];

lastfield = null;

$(function() {
    $(".periodText").autocomplete({
        minLength: 0,
        source: classes,
        select: function( event, ui ) {
            $(this).val( ui.item.label );
            return false;
        }
    })
    .data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a>" + item.label + "<br/>" + item.room + "</a>" )
            .appendTo( ul );
    };
});