JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.5/typeahead.bundle.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 states = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  local: $.map(suggestionsArray, function(state) { return { value: state }; })
});


var quicksearchInput = $("#in");
 
// kicks off the loading/processing of `local` and `prefetch`
states.initialize();

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

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