Jan Mikoláš
Practical guide
How to create product autocomplete for an online store
After a few characters, return a small set of fast, relevant suggestions rather than a miniature search results page.
In short
Autocomplete has a different job from full-text search
Autocomplete responds while the user types. It needs low latency, a bounded result set, and prefix matching optimized in the index, not an expensive wildcard over all text.
Elasticsearch provides both search_as_you_type and the completion suggester. For product names with normal relevance scoring, search_as_you_type with a bool_prefix query is a good baseline.
Prepare
What you need
Decide what counts as a suggestion: a product, brand, category, or previous query. Each type has different data and rules.
- Product names, brands, categories, availability, popularity, and a stable destination URL.
- Real user prefixes including typos, diacritics, mobile input, and zero-result phrases.
- A response target such as backend p95 below 100 ms, minimum input length, and maximum suggestions.
- Visibility rules by market, language, tenant, and product availability.
Steps 1 to 3
Optimize the index, query, and interface
Speed does not come only from frontend debouncing. Prefixes must be represented efficiently in the search index.
1. Prepare a type-ahead field
- Map the product name as search_as_you_type. Elasticsearch creates shingle and prefix subfields optimized for incremental completion.
- Adapt analysis to the language and test lowercase and diacritics. Aggressive stemming can surprise on short prefixes.
- Add keyword filters for market, state, and availability and a numeric popularity value for bounded boosting.
- Do not manually index every possible combination with n-grams without measuring. More tokens increase index size and update cost.
"name_suggest": {"type": "search_as_you_type", "max_shingle_size": 3}2. Query prefixes and bound results
- Use a bool_prefix multi_match over name_suggest and its _2gram and _3gram fields. Do not start with *text*.
- Filter active and visible products. Decide whether an unavailable product disappears or merely ranks lower.
- Return perhaps eight suggestions with ID, name, image, price, and URL. Large descriptions and aggregations do not belong here.
- Base ranking on text match first, then carefully add popularity, availability, or a business signal with a cap on its influence.
multi_match type=bool_prefix fields=name_suggest,name_suggest._2gram,name_suggest._3gram size=83. Bound browser traffic
- Begin searching after perhaps two characters and debounce input by 150 to 250 ms. Tune values from measurements.
- Cancel the previous request after another character and associate responses with their query. A slow old response must not replace a new one.
- Cache common anonymous prefixes briefly, but include language, market, and other visibility context in the key.
- Escape suggestions, support keyboard navigation, and announce state to assistive technology. Never insert index text as trusted HTML.
minLength=2; debounce=200ms; size=8; cancelPrevious=trueStep 4
Verify speed and suggestion quality
Autocomplete must remain useful under rapid typing, concurrency, and responses arriving out of order.
-
Replay real prefixes
Store expected products for common prefixes and measure ordering, zero-result rate, and p95 latency.
php bin/phpunit --filter Autocomplete -
Simulate rapid typing
Send several requests in quick succession and return responses in reverse order. The UI must show only the latest input.
-
Test accessibility and hostile text
Navigate by keyboard and screen reader and use a product name containing HTML characters. The name must render as text.
When it goes wrong
Common mistakes
A wildcard query overloads the cluster
Index prefixes with a suitable field type and use bool_prefix or the completion suggester. A leading wildcard over large text is a poor autocomplete baseline.
An old response replaces newer suggestions
Cancel requests or tag them with a sequence ID and confirm the response still matches current input before rendering.
Popularity pushes out an exact match
Cap its weight and protect textual relevance with tests. Business boosting must not turn suggestions into unrelated advertising.
Suggestions expose a hidden product
Filter visibility inside the query and synchronize state changes into the index. Do not rely only on post-filtering hits.
Done
Autocomplete is fast, relevant, and safe.
Elasticsearch now serves an optimized prefix query and the interface sends bounded traffic. Keep improving quality from real prefixes, clicks, and latency.