Typeahead.js and Json

Question

I am using typeahead.js for re-useable invoice items in my application. When you type the name of the item and select a suggested one, it populates the item number, item name, and item price for you.

When I was using local data, everything was working just fine. But now that I have switched to getting my data from a different location (fetch) it isn't working anymore. I have a feeling it is because of the format of my json.

By it isn't working anymore, I mean when you type in the .typeahead inputs nothing gets suggested.

Here is my Javascript:

<script>
var names = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 10,
    prefetch: {
        url: '/admin/items/fetch_items',
        filter: function(list) {
            return $.map(list, function(value) { return { name: value }; });
        }
    }
});

var ids = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('id'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 10,
    prefetch: {
        url: '/admin/items/fetch_items',
        filter: function(list) {
            return $.map(list, function(value) { return { id: value }; });
        }
    }
});

var costs = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('cost'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 10,
    prefetch: {
        url: '/admin/items/fetch_items',
        filter: function(list) {
            return $.map(list, function(value) { return { name: value }; });
        }
    }
});

// Initialise Bloodhound suggestion engines for each input
names.initialize();
ids.initialize();
costs.initialize();

// Make the code less verbose by creating variables for the following
var itemNameTypeahead = $('input[name="item_name[]"].typeahead');
var itemIdTypeahead = $('input[name="item_number[]"].typeahead');
var itemCostTypeahead = $('input[name="item_price[]"].typeahead');

// Initialise typeahead for the item name
itemNameTypeahead.typeahead({
    highlight: true
}, 
{
    name: 'name',
    displayKey: 'name',
    source: names.ttAdapter()
});

// Initialise typeahead for the item id
itemIdTypeahead.typeahead({
    highlight: true
}, 
{
    name: 'id',
    displayKey: 'id',
    source: ids.ttAdapter()
});

// Initialise typeahead for the item price
itemCostTypeahead.typeahead({
    highlight: true
}, 
{
    name: 'cost',
    displayKey: 'cost',
    source: costs.ttAdapter()
});

// Set-up event handlers so that the ID is auto-populated in the id typeahead input when the name is
// selected an vice versa

var itemNameItemSelectedHandler = function (eventObject, suggestionObject, suggestionDataset) {
    itemIdTypeahead.val(suggestionObject.id);
    itemCostTypeahead.val(suggestionObject.cost);
};

var itemCostItemSelectedHandler = function (eventObject, suggestionObject, suggestionDataset) {
    itemNameTypeahead.val(suggestionObject.name);
    itemIdTypeahead.val(suggestionObject.id);
};

var itemIdItemSelectedHandler = function (eventObject, suggestionObject, suggestionDataset) {
    itemNameTypeahead.val(suggestionObject.name);
    itemCostTypeahead.val(suggestionObject.cost);
};

// Associate the typeahead:selected event with the bespoke handler
itemNameTypeahead.on('typeahead:selected', itemNameItemSelectedHandler);
itemCostTypeahead.on('typeahead:selected', itemCostItemSelectedHandler);
itemIdTypeahead.on('typeahead:selected', itemIdItemSelectedHandler);

And then my php that creates the json

    public function fetch_items()
{
    $items = $this->item->get_items();

    $item_array = array();

    foreach($items as $item)
    {
        $item_array[] = array(
            'id' => $item->service_id,
            'name' => $item->service_name,
            'cost' => $item->service_price,
        );
    }

    $items = json_encode($item_array);

    echo $items;
}

This generates this for json:

[{"id":"335661421750","name":"Monthly Hosting Fee","cost":"12.00"},{"id":"927463527850","name":"Daily Disrupted Service Discount","cost":"-0.4"}]