<div class="container">
    <div class="row">
        <div class="card shadow">
            <div class="card-body">
                <h2 class="text-center">NBA teams typeahead</h2>
                <div id="nba-teams">
                    <input class="typeahead form-control" type="text" placeholder="NBA teams">
                </div>
            </div>
        </div>
    </div>
</div>

let teams = [];

$.ajax({
    url: 'https://api.nbastatr.com/teams/',
    type: 'GET',
    dataType: 'json',
    success: function (json) {
        let arrayLength = json.length;
        for (let i = 0; i < arrayLength; i++) {
            if (!teams.includes(json[i]['name_full'])) {
                teams.push(json[i]['name_full']);
            }
        }
        return teams;
    }
});

let substringMatcher = function (strs) {
    return function findMatches(q, cb) {
        let matches, substringRegex;
        matches = [];
        substrRegex = new RegExp(q, 'i');
        $.each(strs, function (i, str) {
            if (substrRegex.test(str)) {
                matches.push(str);
            }
        });
        cb(matches);
    };
};


$('#nba-teams .typeahead').typeahead({
        hint: true,
        highlight: true,
        minLength: 1
    },
    {
        name: 'teams',
        source: substringMatcher(teams)
    });