基于Laravel的ElasticSearch搜索联想（即时搜索）实现咨询

嘿，我之前在Laravel项目里折腾过Elasticsearch的即时搜索功能，给你梳理下具体的实现步骤，应该能帮你搞定！

第一步：配置Elasticsearch索引的字段映射 #

要实现输入即联想，首先得让Elasticsearch支持前缀匹配或者自动补全，常用的两种方案：

方案1：使用Completion Suggester（推荐，性能更高） #

这种方式是专门为自动补全设计的，需要在索引里定义completion类型的字段。比如你要给Product模型的name字段做联想，可以这样设置映射：

// 可在模型boot方法创建索引时设置，或直接用Elasticsearch客户端创建
$client = \Elasticsearch\ClientBuilder::create()->build();

$params = [
    'index' => 'products',
    'body' => [
        'mappings' => [
            'properties' => [
                'name' => [
                    'type' => 'text',
                    'fields' => [
                        'suggest' => [
                            'type' => 'completion',
                            'analyzer' => 'simple',
                            'preserve_separators' => true,
                            'preserve_position_increments' => true,
                            'max_input_length' => 50
                        ]
                    ]
                ]
            ]
        ]
    ]
];

$client->indices()->create($params);

方案2：使用NGram分词器（适合灵活模糊前缀匹配） #

如果需要中间部分也能匹配的前缀搜索，可采用NGram分词器。设置索引分析器和字段映射：

$params = [
    'index' => 'products',
    'body' => [
        'settings' => [
            'analysis' => [
                'analyzer' => [
                    'ngram_analyzer' => [
                        'type' => 'custom',
                        'tokenizer' => 'ngram_tokenizer'
                    ]
                ],
                'tokenizer' => [
                    'ngram_tokenizer' => [
                        'type' => 'ngram',
                        'min_gram' => 2,
                        'max_gram' => 10
                    ]
                ]
            ]
        ],
        'mappings' => [
            'properties' => [
                'name' => [
                    'type' => 'text',
                    'analyzer' => 'ngram_analyzer',
                    'search_analyzer' => 'standard'
                ]
            ]
        ]
    ]
];

$client->indices()->create($params);

第二步：Laravel后端实现搜索接口 #

接下来写控制器方法，处理前端搜索请求，调用Elasticsearch查询联想结果。

用Completion Suggester的查询示例 #

use Illuminate\Http\Request;
use Elasticsearch\ClientBuilder;

class SearchController extends Controller
{
    public function autocomplete(Request $request)
    {
        $query = $request->input('q');
        if (empty($query)) {
            return response()->json([]);
        }

        $client = ClientBuilder::create()->build();
        $params = [
            'index' => 'products',
            'body' => [
                'suggest' => [
                    'product_suggest' => [
                        'prefix' => $query,
                        'completion' => [
                            'field' => 'name.suggest',
                            'fuzzy' => [
                                'fuzziness' => 1 // 允许1个字符错误，提升容错性
                            ]
                        ]
                    ]
                ]
            ]
        ];

        $response = $client->search($params);
        $suggestions = collect($response['suggest']['product_suggest'][0]['options'])
            ->pluck('text')
            ->unique()
            ->values()
            ->all();

        return response()->json($suggestions);
    }
}

用NGram分词器的查询示例 #

如果用NGram，就用match_phrase_prefix查询：

public function autocomplete(Request $request)
{
    $query = $request->input('q');
    if (empty($query)) {
        return response()->json([]);
    }

    $client = ClientBuilder::create()->build();
    $params = [
        'index' => 'products',
        'body' => [
            'query' => [
                'match_phrase_prefix' => [
                    'name' => [
                        'query' => $query,
                        'max_expansions' => 10 // 限制返回数量，提升性能
                    ]
                ]
            ],
            '_source' => ['name'] // 只返回需要的字段
        ]
    ];

    $response = $client->search($params);
    $suggestions = collect($response['hits']['hits'])
        ->pluck('_source.name')
        ->unique()
        ->values()
        ->all();

    return response()->json($suggestions);
}

别忘了在路由文件（routes/api.php或routes/web.php）中添加路由：

Route::get('/api/search/autocomplete', [SearchController::class, 'autocomplete']);

第三步：前端实现输入监听与结果展示 #

前端需要监听输入框事件，发送AJAX请求获取结果并展示，这里加入防抖处理避免频繁请求：

<div class="search-container">
    <input type="text" id="search-input" placeholder="输入关键词搜索...">
    <ul id="suggestions-list" style="display: none;"></ul>
</div>

<script>
const searchInput = document.getElementById('search-input');
const suggestionsList = document.getElementById('suggestions-list');
let debounceTimer;

// 防抖函数
function debounce(func, delay) {
    return function() {
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(func, delay);
    }
}

// 获取联想结果
function fetchSuggestions() {
    const query = searchInput.value.trim();
    if (!query) {
        suggestionsList.style.display = 'none';
        return;
    }

    fetch(`/api/search/autocomplete?q=${encodeURIComponent(query)}`)
        .then(response => response.json())
        .then(data => {
            if (data.length === 0) {
                suggestionsList.style.display = 'none';
                return;
            }

            // 渲染结果列表
            suggestionsList.innerHTML = data.map(item => `<li>${item}</li>`).join('');
            suggestionsList.style.display = 'block';
        })
        .catch(error => console.error('获取联想结果失败:', error));
}

// 监听输入事件
searchInput.addEventListener('input', debounce(fetchSuggestions, 300));

// 点击页面其他区域隐藏列表
document.addEventListener('click', (e) => {
    if (!e.target.closest('.search-container')) {
        suggestionsList.style.display = 'none';
    }
});
</script>

一些优化小技巧 #

• 防抖处理：已经加入300ms防抖，避免每输入一个字符就发起请求。
• 前端缓存：可将已查询过的关键词结果存在前端缓存，重复输入时直接复用，减少请求。
• 结果数量限制：在Elasticsearch查询中设置size或max_expansions，避免返回过多结果影响性能。
• 模糊匹配：通过fuzzy参数允许少量字符错误，提升用户体验。

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