JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.4/typeahead.bundle.min.js"></script>
<input class="typeahead" placeholder="Enter to Search" />

CSS

.tt-query,
/* UPDATE: newer versions use tt-input instead of tt-query */
 .tt-hint {
    /*width: 396px;
    height: 30px;
    padding: 8px 12px;
    font-size: 24px;
    line-height: 30px;
    border: 2px solid #ccc;
    border-radius: 8px;
    outline: none;*/
}
.tt-query {
    /* UPDATE: newer versions use tt-input instead of tt-query */
    /*box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);*/
}
.tt-hint {
    color: #999;
}
.tt-menu {
    /* UPDATE: newer versions use tt-menu instead of tt-dropdown-menu */
    /*width: 422px;
    margin-top: 12px;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    box-shadow: 0 5px 10px rgba(0,0,0,.2);*/
    margin-top: 2px;
    background-color: #FFF;
    border-radius: 5px;
    width: 200px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1.5px 9px 1px rgba(0, 0, 0, 0.12);
    padding: 10px 5px 15px;
}
/*#scrollable-dropdown-menu .tt-dropdown-menu {
  max-height: 150px;
  overflow-y: auto;
}*/
 .tt-dropdown-menu, .tt-menu {
    max-height: 180px;
    overflow-y: auto;
}
.tt-suggestion {
    padding: 3px 10px;
    line-height: 20px;
    font-size: inherit;
    border-bottom: 1px solid #d1dce5
}
.tt-suggestion:hover {
    cursor: pointer;
    background-color: #344959;
    color: #FFF;
}
.tt-suggestion.tt-is-under-cursor, .tt-suggestion.tt-cursor {
    /* UPDATE: newer versions use .tt-suggestion.tt-cursor */
    color: #fff;
    background-color: #0097cf;
}
.tt-suggestion p {
    margin: 0;
}

JavaScript

var jsonData = [{
    country: "Holland",
    city: "Amsterdam"
}, {
    country: "Belgium",
    city: "Brussel"
}, {
    country: "Germany",
    city: "Berlin"
}, {
    country: "France",
        "city": "Paris"
}];

var dataSource = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('country', 'city'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: jsonData

});

dataSource.initialize();


$('.typeahead').typeahead({
    minLength: 0,
    highlight: true
}, {
    name: 'countries',
    display: function(item){ return item.country},
    source: dataSource.ttAdapter(),
    templates: {
        empty: [
            '<div class="empty">No Matches Found</div>'].join('\n'),
        suggestion: function (data) {
            return '<div>' + data.country + '–' + data.city + '</div>'
        }
    }
});