0

我在我的应用程序中使用 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"}]
4

0 回答 0