JSFiddle - React, Tailwind, and code Playground

by Dhiraj Bodicherla

HTML

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

CSS

.container {
    width: 800px;
    margin: 50px auto;
}
.typeahead-wrapper {
    display: block;
    margin: 50px 0;
}
.tt-dropdown-menu {
    background-color: #fff;
    border: 1px solid #000;
}
.tt-suggestion.tt-cursor {
    background-color: #ccc;
}

JavaScript

$(document).ready(function () {

    var dataSource = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        prefetch: {
            url: "http://output.jsbin.com/cajebe/1.json",
            filter: function(data){
                return $.map(data, function(item){
                    return {'value' : item};
                });
            }
        }
    });


    dataSource.initialize();

    $('.typeahead').typeahead({
        highlight: true
    }, {
        displayKey: 'value',
        source: dataSource.ttAdapter()
    });

});