JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<input id="name">
<p id="email"></p>

CSS

#name {
    display: block;
    font-weight: bold;
    margin-bottom: 1em;
  }
  
  #email {
    margin: 0;
    padding: 0;
  }

JavaScript

$(function() {
    var users = [{
        "email": "[email protected]",
        "name": "marie"
    }, {
        "email": "[email protected]",
        "name": "miss"
    }];

    function handleAutocomplete(term) {
        // use 'term' for custom filtering etc.
        var options = $.grep(users, function(e){ return e.name.startsWith(term); });
        return options;
    }
    $("#name").autocomplete({
        minLength: 0,
        source: function(request, response) {
            var name = request.term;
            var data = handleAutocomplete(name); /* get answers from somewhere.. */
            response(data);
        },
        focus: function(event, ui) {
            $("#name").val(ui.item.name);
            return false;
        },

        select: function(event, ui) {
            $("#name").val(ui.item.name);
            $("#email").html(ui.item.email);
            return false;
        }
    }).autocomplete("instance")._renderItem = function(ul, item) {
        return $("<li>")
            .append("<a>" + item.name + "<br>" + item.email + "</a>")
            .appendTo(ul);
    };
});