Javascript 无法使用Jquery、Ajax、JSP在HTML表中自动完成搜索结果

因此，我使用AJAX技术和jQuery库来调用Spring boot REST控制器方法。该应用程序可以工作，但我无法使搜索结果适合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>

a型产品

标签：




身份证件
名称
描述
价格

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);
                    },

                });

            }
        });
});

$（文档）.ready（函数（）{
$（“#产品名称”）
.自动完成({
最小长度：2，
来源：“${pageContext.request.contextPath}/product/search”，
/*声明sourc变量*/
选择：功能（事件、用户界面）{
/*单击事件dans ui以激发方法*/
/*警报（事件）*/
var inputFromBox=ui.item.label；
var搜索结果=[]；
var html_to_append=''；
$.ajax({
键入：“GET”，
url:“${pageContext.request.contextPath}/product/search_full？inputParam=”+inputFromBox，
数据类型：“json”，
成功：功能（响应）{
控制台日志（响应）；
$。每个（响应、功能（i、项目）{
html_to_append+=''；
html_to_append+=''+item.id+''；
html_to_append+=''+item.name+''；
html_to_append+=''+item.description+''；
html_to_append+=''+item.price+''；
html_to_append+=''；
});
$（“#结果#表”）.append（html#u to_append）；
},
});
}
});
});

因为id为

result\u table

的元素是

，而不是表

<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>

到

---

我想知道2k rep用户怎么能用这种代码格式发布一个问题？它看起来已经不同了，但仍然不适合。请参阅更新的图像。感谢anyway@georgesvan您可以使用css

text align

属性再次检查。类似于您的表格标题对齐位于

中心

，而您的表格主体对齐位于

左侧

。

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

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