根据自动完成计算总数 suggestion.data

Question

我正在尝试编写一个带有自动完成搜索表单的 Jquery 小程序。我希望用户能够将自动完成表单中的项目添加到某种购物清单中。我很难找到一种方法来计算和更新所有添加产品的总价，我试图存储价格，这些价格在 suggestion.data 中，并将其递归地添加到总价中，如 total = total + suggestion.data，但这似乎不是办法。有人可以帮我生成并显示这个总数吗？我的jQuery代码如下：

var Price = {};
var Name = {};
var Totaal = {};

$(function () {
    var currencies = [
        {value:'TEXT-STRING',data:'5.50)'},
        {value:'TEXT-STRING2',data:'3.10)'},
    ];

    $('#autocomplete').autocomplete({
        lookup: currencies,
        onSelect: function (suggestion) {
            Price.fff = suggestion.data;
            Name.fff = suggestion.value;
        },   
    });
});

function addListItem() {
    var write2 = Price.fff;
    var write = $('#autocomplete').val();
    var list = $('#itemList');
    var item = $('<li><span class="list">' + write + '</span><button 
 class="delete">X</button></li>');

    var autocomplete = $("#autocomplete");

    if (write.length === 0 || write.length > 88) {
        return false;
    }

    if (write == Name.fff) {
        list.append(item);
        list2.append(item2);
        $(autocomplete).val('');
    }
    $(autocomplete).val('');

}

function deleteItem() {
    $(this).parent().remove();
}

$(function () {
    var add = $('#addItem');
    var autocomplete = $('#autocomplete');
    var list = $('#itemList');
    add.on('click', addListItem);
    list.on('click', '.delete', deleteItem);
    autocomplete.on('keypress', function (e) {
        if (e.which == 13) {
            addListItem();
        }
    }

我的 HTML 看起来像：

  <body>
    <div id="box-1"> </div>
    <div id="box-2"> </div>
    <div id="page">
      <h1>Shop</h1>
    </div>
    <div id="main">
      <div id="top">
        <div id="form">
          <div id="searchfield">
            <input type="text" id="autocomplete" name="currency" class="biginput" placeholder="ADD ITEMS BELOW">
            <input type="submit" id="addItem" value="+">
          </div>
          <div class="line"> </div>
        </div>
        <div id="bottom">
          <div class="items">
            <ul id="itemList">
            </ul>
          </div>
        </div>

Answer 1

将添加的项目与价格保持在数组中，以便您可以随时重新计算总计。从列表中删除时不要忘记将其从数组中删除。

不要在 DOM 中保留数据，仅使用 DOM 来显示模型中的信息。

根据自动完成计算总数 suggestion.data

Calculate a total from autocomplete suggestion.data

html

jquery

autocomplete