如何使用jQuery Ajax响应创建折叠表

Question

我正在尝试创建一个网站，在这里我可以与最便宜的供应商一起搜索特定产品。我可以使用Elastichsearch从数据库中获取数据，并使用jQuery Ajax获取数据库。

<script>
    $('.js-ajax').select2({
        ajax: {
            url: '/product/api/elasticsearch',
            dataType: 'json',
            width: 'resolve', // need to override the changed default
            minimumResultsForSearch: -1,
            dropdownCssClass: 'select2-hidden',

            success: function (data) {
                var returnedData = data;
                // clear table
                $('#products tbody').empty();

                for(let i = 0; i < returnedData.results.length; i++){
                    $("#products").find('tbody')
                        .append($('<tr>')
                            .append($('<td>')
                                .text(returnedData.results[i].id)
                            )

                            .append($('<td class="columt">')
                                .text(returnedData.results[i].text)
                            )

                            .mouseover(returnedData.results[1].text)

                            .append($('<td class="columnp">')
                                .text(returnedData.results[i].sku)
                            )
                            .append($('<td class="colum7">')
                                .text(returnedData.results[i].vendor)
                            )
                        );
                }
            }
        }
    });
</script>

我可以将响应放入表格中，但是如何将响应放入折叠表格中？我认为我必须创建一个foreach循环并标记每个产品。

我尝试了这个，但是没有用

function addProducts(products) {
  products.forEach(fucntion(product) {
                   var template = $('#products').text();//get template
                    template = template.replace('{id}', product.id);//replace placeholders to data
                    template = template.replace('{title}', product.title);
                    template = template.replace('{price}', product.id);
                    //...other data
                    $('#search-result').append(template);//add to box
                    bindProduct(product.id);//add event  
                   });
}

function bindProduct(productID) {
  $('#'+productID).on('mouseover', function() {//or another event
    showPopup();//justs add opened class or what you want
  });
}

上面的代码出现语法错误，我找不到。

第一个想法是通过鼠标悬停将数据放在表中。但是由于这在小屏幕上无法按预期工作，所以我决定将数据折叠起来，但是我被卡住了

Answer 1

您拼错了功能。尝试：

function addProducts(products) {
  products.forEach(function(product) { //here was the "fuction" misspell
                   var template = $('#products').text();//get template
                    template = template.replace('{id}', product.id);//replace placeholders to data
                    template = template.replace('{title}', product.title);
                    template = template.replace('{price}', product.id);
                    //...other data
                    $('#search-result').append(template);//add to box
                    bindProduct(product.id);//add event  
                   });
}

function bindProduct(productID) {
  $('#'+productID).on('mouseover', function() {//or another event
    showPopup();//justs add opened class or what you want
  });
}