如何实现MapBox搜索框？遇滚动及POI显示问题求助

先修正代码基础配置，再针对性解决你的两个问题：

一、修复代码初始化失效问题 #

你的代码缺少Mapbox Search JS的核心脚本引入，且初始化逻辑有误。以下是可运行的基础代码：

<form method="GET">
    {% csrf_token %}
    <!-- 引入Mapbox Search JS核心脚本 -->
    <script id="search-js" src="https://api.mapbox.com/search-js/v1.0.0-beta.15/mapboxsearch.js"></script>
    <script>
        const accessToken = '你的Mapbox Access Token'; // 替换为你的有效Token
        document.getElementById('search-js').onload = function() {
            // 初始化SearchBox组件（更适合POI搜索场景）
            const searchBox = new mapboxsearch.SearchBox({
                accessToken: accessToken,
                // 配置搜索类型，明确包含POI
                types: ['poi', 'address', 'place']
            });
            // 将组件挂载到输入框
            const input = document.querySelector('input[name="search_query"]');
            searchBox.mount(input);
        };
    </script>
    <input type="search" name="search_query" placeholder="Enter a Location" autocomplete="off">
    <button type="submit" name="submit"><i class="fa fa-search"></i></button>
</form>

二、解决页面滚动问题 #

Mapbox默认的下拉建议框会撑开页面导致滚动，通过CSS限制建议框的高度和定位即可解决：

/* 限制建议框高度，内部滚动 */
.mapboxsearch-suggestions-container {
    max-height: 300px;
    overflow-y: auto;
    position: fixed; /* 固定定位，避免撑开页面布局 */
    width: inherit; /* 继承输入框宽度 */
}

/* 建议框显示时，禁止页面整体滚动 */
body:has(.mapboxsearch-suggestions-container[aria-hidden="false"]) {
    overflow: hidden;
}

三、显示POI搜索结果 #

1. 改用SearchBox组件：Autofill组件主打地址自动补全，而SearchBox原生支持POI（商铺、景点等）搜索；
2. 配置types参数：初始化时明确指定types: ['poi', 'address', 'place']，确保返回POI类型结果；
3. 关闭原生自动补全：将输入框的autocomplete设为off，避免原生属性与Mapbox控件冲突。

内容的提问来源于stack exchange，提问作者Muffin