JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.jquery.js"></script>
<input type = "text" id = "in" />

CSS

.tt-query {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.tt-hint {
    color: #999999;
}
.tt-dropdown-menu {
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    margin-top: 0px;
    padding: 0 0 4px 0;
    width: 100%;
}
.tt-suggestion {
    font-size: 14px;
    padding: 2px 10px;
    cursor: pointer;
}
.tt-suggestion.tt-cursor {
    background-color: #0097CF;
    color: #FFFFFF;
}
.tt-suggestion p {
    margin: 0;
}

JavaScript

var suggestionsArray = ["john", "patrick", "david", "dorothy", "jasmine"];
var quicksearchInput = $("#in");

function obtainer(query, cb) {
    var filteredList = $.grep(suggestionsArray, function (item, index) {
        return item.match(query);
    });

    mapped = $.map(filteredList, function (item) { return { value: item } });
    cb(mapped);
}

quicksearchInput.typeahead({
    hint: true,
    highlight: true,
    minLength: 0
}, {
    name: "noname",
    displayKey: "value",
    source: obtainer
});

quicksearchInput.on("click", function () {
    ev = $.Event("keydown")
    ev.keyCode = ev.which = 40
    $(this).trigger(ev)
    return true
});