JavaScript — Typeahead.js и Json

Я использую typeahead.js для многократного использования пунктов счета в моем приложении. Когда вы вводите название предмета и выбираете предложенный, он заполняет номер предмета, название предмета и цену предмета.

Когда я использовал локальные данные, все работало просто отлично. Но теперь, когда я перешел на получение данных из другого места (выборка), он больше не работает. У меня есть ощущение, что это из-за формата моего JSON.

Это больше не работает, я имею в виду, когда вы вводите .typeahead входы ничего не предлагается.

Вот мой 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);

А потом мой PHP, который создает 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;
}

Это генерирует это для JSON:

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