Integration best practices
Optimizing your autocomplete implementation is crucial for a fast and responsive user experience.
Avoiding latency
Section titled “Avoiding latency”Direct implementation (recommended)
Section titled “Direct implementation (recommended)”If you implement the JSON API directly, we strongly recommend consuming it directly from the HTML page (client-side).
- Why? This avoids the latency of proxying requests through your backend servers.
- Security: The API is designed for public access. No sensitive information (like private keys) is required to call it, only your
tracker_id.
Avoid proxying
Section titled “Avoid proxying”Do not proxy calls to Luigi’s Box Autocomplete API via your backend servers. This introduces unnecessary network hops and delays the response, making the search-as-you-type experience feel sluggish.
Performance optimization
Section titled “Performance optimization”DNS prefetching
Section titled “DNS prefetching”To avoid the DNS lookup penalty on the very first autocomplete request, we recommend adding a DNS prefetch instruction to your HTML code.
Add the following code anywhere in your <head> tag:
<link rel="dns-prefetch" href="//live.luigisbox.com">Fetch only necessary fields
Section titled “Fetch only necessary fields”To reduce payload size and improve parsing time, only request the fields you actually display in the autocomplete dropdown.
Use the hit_fields parameter to specify a comma-separated list of fields.
Example:
hit_fields=title,price,image_link,url
Implementation choice
Section titled “Implementation choice”| Method | Pros | Cons |
|---|---|---|
| Autocomplete.js | Plug-and-play, built-in caching and analytics, handles UI rendering | Less UI customization flexibility |
| Direct API | 100% UI control, integrating into native mobile apps | Must implement caching and analytics manually, requires more development effort |
Was this page helpful?
Thanks.