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 projectNumbers;
    $.getJSON("http://jsbin.com/heyobi/1.json")
        .done(function (result) {
        projectNumbers = result;
        initTypeahead();
    })
        .fail(function (jqXHR, textStatus, err) {
        alert('Error: ' + err);
    });


    var substringMatcher = function (strs) {
        return function findMatches(q, cb) {
            var matches, substrRegex;

            // an array that will be populated with substring matches
            matches = [];

            // regex used to determine if a string contains the substring `q`
            substrRegex = new RegExp(q, 'i');

            // iterate through the pool of strings and for any string that
            // contains the substring `q`, add it to the `matches` array
            $.each(strs, function (i, str) {
                if (substrRegex.test(str)) {
                    // the typeahead jQuery plugin expects suggestions to a
                    // JavaScript object, refer to typeahead docs for more info
                    matches.push({
                        value: str
                    });
                }
            });

            cb(matches);
        };
    };

    function initTypeahead() {
        $('.typeahead').typeahead({
            hint: true,
            minLength: 2,
            highlight: true,
        }, {
            name: 'projects',
            source: substringMatcher(projectNumbers),
        });
    }
});