javascript - Typeahead.js と Json

Question

アプリケーションで再利用可能な請求書項目に typehead.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);

そして、jsonを作成する私のphp

    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"}]