JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="project-label">Select a project (type "j" for a start):</div>
    <img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt="" />
    <input id="project" />
    <input type="hidden" id="project-id" />
    <p id="project-description"></p>
</body>

CSS

#project-label {
    display: block;
    font-weight: bold;
    margin-bottom: 1em;
}
#project-icon {
    float: left;
    height: 32px;
    width: 32px;
}
#project-description {
    margin: 0;
    padding: 0;
}
body {
    font-family:"Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
    font-size: 62.5%;
}

JavaScript

$(function () {
    var projects = [{
        value: "西安交通大学",
        label: "西交 xianjiaotongdaxue",
        hanzi: "西安交通大学"
    }, {
        value: "西安电子科技大学",
        label: "xiandianzikejidaxue",
        hanzi: "西安电子科技大学"
    }, {
        value: "西北大学",
        label: "xibeidaxue",
        hanzi: "西北大学"
    }];

    $("#project").autocomplete({
        source: projects,
        delay: 0
    })
    .data("ui-autocomplete")._renderItem = function (ul, item) {
        return $("<li>")
            .append("<a>" + item.hanzi + "</a>")
            .appendTo(ul);
    };
    $('#project').keyup(function(){console.log('keyup')});
});