大数据量输入框自动补全如何优化解决页面加载过慢问题

完全可以实现用户输入后再按需加载数据，从根源解决首屏全量拉取数据导致的加载慢问题，调整逻辑分4个核心部分：

• 移除原有页面初始化时PHP拉取全量城市数据的逻辑，这部分是首屏耗时高的核心原因：页面渲染阶段服务端需要先拉完所有城市数据、拼接完JS代码才能把页面返回给用户，数据量越大等待时间越长。
• 新增一个轻量PHP代理接口，接收前端传入的搜索关键词，直接调用官方API的搜索能力拉取匹配的结果，不用拉全量数据自行过滤。
• 前端输入框增加防抖逻辑，避免用户每敲一个字符就发起请求，减少无效接口调用；同时处理请求竞态问题，避免后发的请求先返回导致结果展示错误。
• 改造原有自动补全逻辑：不再读取本地预存的全量城市数组，而是等接口返回匹配结果后再渲染下拉选项。

1. 新建城市搜索PHP接口（search-cities.php） #

这个接口只返回和用户输入关键词匹配的城市数据，单次返回数据量极小，同时可以加简单缓存降低官方接口调用频率：

<?php
// 仅接受关键词参数
$keyword = isset($_GET['q']) ? trim($_GET['q']) : '';
// 关键词长度小于2直接返回空数组，减少无效请求
if (strlen($keyword) < 2) {
    header('Content-Type: application/json');
    echo json_encode([]);
    exit;
}

// 简单文件缓存，相同关键词结果缓存1天
$cacheFile = sys_get_temp_dir() . '/city_search_' . md5($keyword) . '.cache';
if (file_exists($cacheFile) && time() - filemtime($cacheFile) < 86400) {
    header('Content-Type: application/json');
    echo file_get_contents($cacheFile);
    exit;
}

// 调用官方API带搜索参数q，仅返回匹配结果，可加limit参数限制最多返回条数
$apiUrl = 'https://api.dataforsyningen.dk/steder?hovedtype=Bebyggelse&undertype=by&limit=10&q=' . urlencode($keyword);
$response = file_get_contents($apiUrl);
// 提取城市名称字段
$rawData = json_decode($response, true);
$cityList = [];
if (!empty($rawData)) {
    foreach ($rawData as $item) {
        if (isset($item['primærtnavn'])) {
            $cityList[] = $item['primærtnavn'];
        }
    }
}
// 写入缓存
file_put_contents($cacheFile, json_encode($cityList));

header('Content-Type: application/json');
echo json_encode($cityList);
?>

2. 前端逻辑调整 #

首先删除原有代码中PHP拉全量数据拼接cities数组的所有代码，替换为以下逻辑：

// 全局变量存防抖定时器、当前请求控制器
let searchTimer = null;
let currentFetchController = null;

// 给搜索输入框绑定输入事件，注意替换成你自己的输入框实际ID
const searchInput = document.getElementById('city-search-input');
searchInput.addEventListener('input', function() {
    const keyword = this.value.trim();
    // 清除之前的防抖定时器
    clearTimeout(searchTimer);
    // 取消上一次未完成的请求，避免请求顺序错乱导致结果显示错误
    if (currentFetchController) {
        currentFetchController.abort();
    }

    // 关键词长度不足2个直接关闭下拉
    if (keyword.length < 2) {
        // 替换为你原有自动补全逻辑里的关闭下拉方法
        closeAutocompleteList();
        return;
    }

    // 防抖300ms，用户停止输入300ms后再发请求
    searchTimer = setTimeout(async () => {
        currentFetchController = new AbortController();
        try {
            // 拉取匹配的城市数据
            const res = await fetch(`search-cities.php?q=${encodeURIComponent(keyword)}`, {
                signal: currentFetchController.signal
            });
            const matchCities = await res.json();
            // 把拿到的匹配城市数组传给自动补全渲染方法，直接渲染即可，无需再做本地全量过滤
            // 替换为你原有自动补全逻辑里的渲染下拉方法
            renderAutocompleteList(matchCities);
        } catch (err) {
            if (err.name !== 'AbortError') {
                console.error('城市数据加载失败', err);
            }
        }
    }, 300);
});

• 接口请求过程中可以在下拉位置显示“加载中”提示，提升交互体验
• 可以给返回的城市结果做前端内存缓存，比如用户输入过关键词又删掉再输入，直接读本地缓存不用重复发请求
• 匹配逻辑可以优先返回前缀匹配的城市，再返回包含关键词的城市，提升搜索结果精准度

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