javascript - 无法使用 Jquery、Ajax、JSP 将自动完成搜索结果放入 HTML 表格中

Question

所以我有这个App使用 AJAX 技术和 jQuery 库来调用 Spring-boot REST Controller 方法。该应用程序可以运行，但我无法使搜索结果适合 HTML 表格。

结果

HTML 代码:

<div align="center">
    <div class="ui-widget">
        <p>Type a product</p>
        <label for="automplete-1">Tags: </label>
        <input type="text" id="productName">
    </div>
</div>

<br>
<!-- <br> Result -->

<br>

<div class="table table-bordered table-striped" id="result_table">

    <table style="width: 50%;">

        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Description</th>
            <th>Price</th>

        </tr>

    </table>

</div>

JavaScript 代码:

$(document).ready(function() {

    $('#productName')
        .autocomplete({
            minLength: 2,
            source: '${pageContext.request.contextPath }/product/search',
            /* declare sourc variable */

            select: function(event, ui) {
                /* click event dans ui to fire method*/
                /* alert(event) */

                var inputFromBox = ui.item.label;
                var searchResults = [];
                var html_to_append = '';

                $.ajax({
                    type: 'GET',
                    url: '${pageContext.request.contextPath }/product/search_full?inputParam=' + inputFromBox,
                    dataType: 'json',

                    success: function(response) {
                        console.log(response);

                        $.each(response, function(i, item) {

                            html_to_append += '<tr>';

                            html_to_append += '<td >' + item.id + '</td>';
                            html_to_append += '<td>' + item.name + '</td>';
                            html_to_append += '<td>' + item.description + '</td>';
                            html_to_append += '<td>' + item.price + '</td>';
                            html_to_append += '</tr>';

                        });

                        $("#result_table table").append(html_to_append);
                    },

                });

            }
        });
});

Answer 1

由于您的元素 ID 为 result_table是 <div> ，不是表格。

<div class="table table-bordered table-striped" id="result_table">

    <table style="width: 50%;">

        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Description</th>
            <th>Price</th>

        </tr>

    </table>

</div>

因此，您需要更改:

$("#result_table").append(html_to_append);

至

$("#result_table table").append(html_to_append);