JSFiddle - React, Tailwind, and code Playground

by Dhiraj Bodicherla

HTML

<script src="https://rawgit.com/twitter/typeahead.js/master/dist/typeahead.bundle.min.js"></script>
<div>
    <select id="numerator">
        <option value="users">users</option>
        <option value="repos">repos</option>
    </select>
    <input id="numeratorId" class="typeahead" type="text" />
</div>
<div>
    <select id="denominator">
        <option value="users">users</option>
        <option value="repos">repos</option>
    </select>
    <input id="denominatorId" class="typeahead" type="text" />
</div>

JavaScript

var make_dataset = function (el) {
    var _el = el;
    var bloodhound = new Bloodhound({
        datumTokenizer: function (datum) {
            return Bloodhound.tokenizers.whitespace(datum.value);
        },
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: {
            url: 'https://api.github.com/search',
            filter: function (users) {
                return $.map(users.items, function (user) {
                    return {
                        value: user.url
                    };
                });
            },
            replace: function (url, query) {
                if (_el.val() === "users") {
                    return url + '/users?q=' + query;
                } else {
                    return url + '/repositories?q=' + query;
                }
            }
        }
    });
    bloodhound.initialize();

    var dataset = {
        source: bloodhound.ttAdapter(),
    }

    return dataset;
}

/* initial setup */
$('.typeahead').each(function () {
    var select = $(this).siblings('select');
    $(this).typeahead({
        hint: true,
        highlight: true,
        minLength: 2
    }, make_dataset(select));
});