Html 如何使搜索结果列表显示在“我的内容”的全宽顶部，而不是向下推内容

所以我有一个搜索栏，当搜索时它会生成一个项目列表。但是，当前列表会向下推送搜索栏下的所有内容，以便列表可以取代其位置。如何更改它，使结果列表显示在内容的顶部，并显示为全宽（与搜索栏大小相同）

因此，如果您看到下图，红色部分是内容之前所在的位置，当我搜索列表时，它被向下推。

我的HTML代码如下：

@section('content')

        <div class="row justify-content-center">
            <div class="col-md-12">

                <div class="card">
                    <div class="card-body" style="overflow-x:auto;">

                        <div class="columns">
                            <div class="column">
                                <form action="....." method="GET">

                                    <div class="input-group">
                                        <input type="text" name="search_bar" id="search_bar" class="form-control input-lg" placeholder="Search by Product Name or ID"/>
                                        <span class="input-group-prepend"><button type="submit" class="btn btn-success">Search</button></span>
                                    </div>
                                    <div id="searchResultsList" class="searchResultsList">
                                    </div>

                                </form>
                            </div>
                        </div>

                            <table class="table is-striped is-hoverable">
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Name</th>
                                    <th>Price</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody>

                                @foreach ($products as $p)
                                    <tr>
                                        .....
                                    </tr>
                                @endforeach

                                </tbody>
                            </table>
    
                    </div>

                </div>
                <br>

            </div>
        </div>
    </div>

@endsection

@节（“内容”）
搜寻
身份证件
名称
价格
行动
@foreach（产品为$p）
.....
@endforeach


@端部

我用于淡入/淡出搜索栏的ajax如下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {

            $('#search_bar').keyup(function(){
                var query = $(this).val();
                if(query != '')
                {
                    $.ajax({
                        ......
                        success:function(data){
                            $('#searchResultsList').fadeIn();
                            $('#searchResultsList').html(data);
                        }
                    });
                }
            });

            $(document).on('click', 'li', function(){
                $('#search_bar').val($(this).text());
                $('#searchResultsList').fadeOut();
            });

        });

    </script>

$（文档）.ready（函数（）{
$（“#搜索栏”）.keyup（函数（）{
var query=$（this.val（）；
如果（查询！=''）
{
$.ajax({
......
成功：功能（数据）{
$（'#searchResultsList'）.fadeIn（）；
$（'#searchResultsList'）.html（数据）；
}
});
}
});
$（文档）。在（'click'，'li'，函数（）上{
$（'#搜索栏'）.val（$（this.text（））；
$（“#搜索结果列表”）.fadeOut（）；
});
});

创建的列表通过PHP返回，如下所示：

$output = '<ul class="dropdown-menu" style="display:block; position:relative">';

            foreach($data as $row) {
                $output .= '<li>'.$row->name.'</li>';
            }
            $output .= '</ul>';

$output='
；
foreach（$行数据）{
$output.='
'.$row->name.
'；
}
$output.='
'；

对于CSS，如果有帮助的话，我只是使用bootstrap/bulma

非常感谢