如何优化Laravel与Ajax的城市列表查询请求

核心问题分析 #

当前代码会将所有匹配的城市数据（最多4万条）一次性返回给前端，浏览器需要处理海量数组并渲染自动补全选项，直接导致页面无响应。优化方向是减少数据传输量、提升查询性能、优化前端请求逻辑。

后端优化（Laravel控制器） #

1. 给城市字段添加数据库索引 #

模糊查询like '%query%'性能极差，给CITY字段添加索引能大幅提升查询速度：

// 在迁移文件中添加索引（或直接执行SQL）
Schema::table('us_cities', function (Blueprint $table) {
    $table->index('CITY');
});

如果MySQL版本支持，也可以用全文索引进一步优化模糊查询：

// 迁移文件添加全文索引
Schema::table('us_cities', function (Blueprint $table) {
    $table->fullText('CITY');
});

// 控制器中使用全文索引查询
$cities = UsCities::whereRaw('MATCH(CITY) AGAINST(? IN BOOLEAN MODE)', [$query])
    ->limit(50)
    ->pluck('CITY')
    ->toArray();

2. 限制返回结果数量 #

自动补全不需要展示所有匹配结果，只返回前50条足够用户选择：

public function getCities(Request $request)
{   
    $query = $request->input('query', '');
    // 限制返回50条数据，避免传输海量数据
    $cities = UsCities::where('CITY', 'like', '%' . $query . '%')
        ->limit(50)
        ->pluck('CITY')
        ->toArray();
    return response()->json($cities);
}

3. 缓存查询结果 #

如果城市数据不频繁更新，缓存查询结果可以避免重复数据库查询：

use Illuminate\Support\Facades\Cache;

public function getCities(Request $request)
{   
    $query = $request->input('query', '');
    // 缓存1小时，键名包含查询关键词区分不同结果
    $cities = Cache::remember('cities_search_' . $query, 3600, function () use ($query) {
        return UsCities::where('CITY', 'like', '%' . $query . '%')
            ->limit(50)
            ->pluck('CITY')
            ->toArray();
    });
    return response()->json($cities);
}

前端优化（Ajax与自动补全） #

1. 改用自动补全组件的远程数据源 #

jQuery UI的autocomplete支持直接对接远程接口，无需手动拉取所有数据，组件会自动处理请求防抖和结果渲染：

$("#city-selected").autocomplete({
    // 远程数据源配置
    source: function(request, response) {
        $.ajax({
            url: '{{ route("get.cities")}}',
            data: { query: request.term }, // request.term是用户输入的内容
            success: function(data) {
                response(data); // 将后端返回的结果传给组件
            }
        });
    },
    minLength: 2, // 输入至少2个字符才触发请求，减少无效查询
    delay: 300 // 延迟300ms触发请求，防抖处理
});

移除原有的手动Ajax请求和startAutocomplete函数即可，组件会自动完成所有逻辑。

2. 手动实现防抖（保留原有逻辑的备选方案） #

如果需要保留原有函数，给输入事件添加防抖，避免用户快速输入时频繁发送请求：

let debounceTimer;
$("#city-selected").on('input', function() {
    // 清除上一次的定时器
    clearTimeout(debounceTimer);
    // 延迟300ms再发送请求
    debounceTimer = setTimeout(() => {
        $.ajax({
            method: "GET",
            url: '{{ route("get.cities")}}',
            data: { query: $(this).val() },
            success: function (response) {
                startAutocomplete(response, "#city-selected");
            }
        });
    }, 300);
});

function startAutocomplete(availableTags, inputSelector) {
    $(inputSelector).autocomplete({
        source: availableTags
    });
}

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