JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.4/typeahead.bundle.min.js"></script>
<input type="text" name="something" placeholder="focus me" />
<input class="typeahead" data-provider="typeahead" placeholder="Testing" />

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

$(document).ready(function () {

    var dataSource = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace("item_name"),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        prefetch: {
            url: "http://jsbin.com/fogowi/1.json"
        }
    });


    dataSource.initialize();

    var typeahead = $('.typeahead').typeahead(null, {
        displayKey: 'item_name',
        source: dataSource.ttAdapter()
    }).on('focus', function () {
        ev = $.Event("keydown");
        ev.keyCode = ev.which = 40;
        $('.typeahead').trigger(ev);
        return true;
    });

});