JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.jquery.js"></script>
<label for="click-bind">Binded for click:</label> 
<input name="click-bind" type = "text" id = "byclick" /> <span><small>(try clicking multiple times)</small></span>

<br>
    <br>
    
<label for="click-bind">Binded for event:</label> 
<input name="click-bind" type = "text" id = "byevent" /> <span><small id="test"></small></span>

CSS

/* generatl styling */
* { font-family: sans-serif; }
label { display: block; font-weight: bold; color: #505050; margin: 3px; }
input { border: 1px solid #ddd; border-radius: 2px; height: 20px; text-indent: 4px; }
small { color: #c1c1c1; }

/* typeahead basic styling */
.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 byclick = $("#byclick");
var byevent = $("#byevent");

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);
}

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

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

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

byevent.on("typeahead:opened", function () {
alert('hello');
    ev = $.Event("keydown")
    ev.keyCode = ev.which = 40
    $(this).trigger(ev)
    return true
});