JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.js"></script>
<div class="alert alert-block alert-info">
    <p>Start typing e.g. "Yog&hellip;" in the Name field, then press enter or
        click on your name when it comes up.</p>
    
    <p>Try typing "Mart&hellip;" to see one way people with the same name could
        be handled.</p>
</div>

<form>
    <label for="name">Name</label>
    <input type="text" id="name" autocomplete="off">

    <label for="user_xid">User ID</label>
    <input type="text" id="user_xid">

    <label for="email">Email</label>
    <input type="email" id="email">
</form>

JavaScript

// Some users (loading an array into memory like this isn't a good idea if
// there are hundreds or thousands of them)
var users = [{name: "Jordan Running", user_xid: "vrunnjo",email: "[email protected]"},
             {name: "Yogendra Thakur",user_xid: "vthakyo",email: "[email protected]"},
             {name: "Michael Bruns",user_xid: "brunmi", email: "[email protected]"},
             {name: "Martin Wise",user_xid: "wisema",email: "[email protected]"},
             {name: "Martin Wise",user_xid: "wisema2",email: "[email protected]"}
                               ];

$(function() {
    $('#name').typeahead({
        // This function supplies the strings to typeahead that appear in
        // the drop-down list. In practice this function might make an Ajax
        // call to get users from Crowd that match "query."
        source: function(query, processCallback) {
            var usersByLabel = this.usersByLabel = {};

            // Build a new object--the keys will be the labels that are shown
            // in the drop-down, e.g. "Jordan Running ([email protected])."
            $.each(users, function(_, user) {
                var label = user.name + " (" + user.email + ")";
                usersByLabel[label] = user;
            });
            // Give just the labels (the keys) to the typehead callback function
            processCallback(Object.keys(this.usersByLabel));
        }

        // This function is called when the user presses enter or clicks on
        // an item in the drop-down
        ,
        updater: function(selected) {
            // Look up the user object by using the text of the chosen item
            // as the key
            var user = this.usersByLabel[selected];

            if (user) {
                // Change the values of the form fields to the values from
                // the user objects
                $('#user_xid').val(user.user_xid);
                $('#email').val(user.email);

                // The...