php - 与 html、json 和 jquery 的乘法

Question

我正在尝试从 mysql 获取数据并用它来计算能量、蛋白质、碳水化合物和脂肪。

公式:

The formula for energy: (energy*inp_size_a_1)/100;
The formula for proteins: (proteins*inp_size_a_1)/100;
The formula for carbs: (carbs*inp_size_a_1)/100;
The formula for fat: (fat*inp_size_a_1)/100;

从 search.php 我获取 json 数据:

[{
    "food_name": "Frosne ekstra grove rundstykker",
    "energy": "250",
    "proteins": "18",
    "carbohydrates": "25",
    "fat": "6"
}, {
    "food_name": "Frosen brokkoliblanding",
    "energy": "26",
    "proteins": "2",
    "carbohydrates": "4",
    "fat": "0"
}, {
    "food_name": "Frossen kyllingfilet",
    "energy": "94",
    "proteins": "21",
    "carbohydrates": "1",
    "fat": "0"
}]

这是我的 HTML:

<!-- Food Autocomplete -->
<script>
$(function() {
    $( "#inp_meal_a_1" ).autocomplete({
        source: 'search.php'
    });
});
</script>
<!-- //Food Autocomplete -->



<input type="text" name="inp_size_a_1" value="" size="3" tabindex="6" id="inp_size_a_1" />
<input type="text" name="inp_meal_a_1" value="" size="40" tabindex="8" id="inp_meal_a_1" />
<input type="text" name="inp_energy_a_1" value="" size="10" id="inp_energy_a_1" />
<input type="text" name="inp_proteins_a_1" value="" size="10" id="inp_proteins_a_1" />
<input type="text" name="inp_carbs_a_1" value="" size="10" id="inp_carbs_a_1" />
<input type="text" name="inp_fat_a_1" value="" size="10" id="inp_fat_a_1" />

我应该做什么来完成这个？

Answer 1

首先将您的 json 更改为如下所示:

[{
    "value": "Frosne ekstra grove rundstykker",
    "energy": "250",
    "proteins": "18",
    "carbohydrates": "25",
    "fat": "6"
}, {
    "value": "Frosen brokkoliblanding",
    "energy": "26",
    "proteins": "2",
    "carbohydrates": "4",
    "fat": "0"
}, {
    "value": "Frossen kyllingfilet",
    "energy": "94",
    "proteins": "21",
    "carbohydrates": "1",
    "fat": "0"
}]

无论您在自动完成中需要什么值，都应该位于 json 中的“value”中。您的代码应该是:

<script>
    $(function() {
            $( "#inp_meal_a_1" ).autocomplete({
                source: 'search.php'
            });
            $('#inp_meal_a_1').on('autocompleteselect', function (e, ui) {
                var val = $('#inp_size_a_1').val();
                var energy = ui.item.energy;
                var proteins = ui.item.proteins;
                var carbohydrates = ui.item.carbohydrates;
                var fat = ui.item.fat;
                $("#inp_energy_a_1").val((energy*val)/100);
                $("#inp_proteins_a_1").val((proteins*val)/100);
                $("#inp_carbs_a_1").val((carbohydrates*val)/100);
                $("#inp_fat_a_1").val((fat*val)/100);
            });
    });
</script>