Typeahead.js not working on remote

Question

The following code works perfectly fine. However, when saving the JSON as a separate file, it fails to work anymore.

var customersData = [
    {
        "id": "1",
        "name": "Stuart Smith"
    },
    {
        "id": "2",
        "name": "James Leward"
    },
    {
        "id": "3",
        "name": "Steve Mitchell"
    },
    {
        "id": "4",
        "name": "George Clifford"
    },
    {
        "id": "5",
        "name": "Emma Clark"
    }
 ]

var customers = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        local: customersData
    });

    customers.initialize();

    $('.typeahead').typeahead(
        null, {
        name: 'customers',
        displayKey: 'name',
        source: customers.ttAdapter()
    }).on('typeahead:selected', function(event, data){            
        console.log(data.id);   
    });

What I believe I only need to do is change local: customersData to remote: { url: "data.json" } but no success. Am I missing something?