Search quality directly correlates with conversion rates in modern e-commerce stores. If a buyer cannot locate the desired product within seconds, they switch platforms. Traditional SQL databases query strings using LIKE operators which scan whole tables, causing severe slowdowns as data sizes increase. To address this, we leverage Elasticsearch.
Elasticsearch is a distributed search engine built on Apache Lucene. It stores documents in inverted indexes, returning matches among millions of records in sub-millisecond times. To build a responsive autocomplete search bar, we configure custom Edge N-gram analyzers that split words into search tokens during the indexing step.
For instance, indexing "Laravel" splits it into prefixes: "l", "la", "lar", "lara", "larav", "larave", "laravel". When users type initial characters, Elasticsearch returns immediate hits without regex computation costs.
Here is the index mapping configuration for Elasticsearch with the Edge N-gram filter:
{
"settings": {
"analysis": {
"analyzer": {
"autocomplete_analyzer": {
"tokenizer": "autocomplete_tokenizer",
"filter": ["lowercase"]
}
},
"tokenizer": {
"autocomplete_tokenizer": {
"type": "edge_ngram",
"min_gram": 2,
"max_gram": 10,
"token_chars": ["letter", "digit"]
}
}
}
}
}
Fuzzy matching tackles typos. Finetuning the fuzziness setting ensures shoppers find items even when misspelling names or using incorrect keyboard layouts. We also integrate synonym maps so searches for "phone" and "smartphone" yield identical results.
Database and search index synchronization is orchestrated using Laravel domain model events. When a product is modified, a background queue job is dispatched to update the index document. This keeps search listings accurate without delaying database writes.
Example Laravel controller handling query suggestions:
namespace App\Http\Controllers;
use Elasticsearch\Client;
use Illuminate\Http\Request;
class SearchController extends Controller
{
public function __construct(private Client $elasticsearch) {}
public function suggest(Request $request)
{
$query = $request->get("q");
$params = [
"index" => "products",
"body" => [
"query" => [
"match" => [
"name" => [
"query" => $query,
"analyzer" => "autocomplete_analyzer"
]
]
]
]
];
return $this->elasticsearch->search($params);
}
}
On the Nuxt 4 client, we implement request debouncing: queries are only dispatched after users pause typing for 300ms. This prevents flooding the API server. Building autocomplete on Elasticsearch delivers fluid, fast, and precise search outputs, improving conversion rates.