Integration Best Practices
Optimizing your autocomplete implementation is crucial for a fast and responsive user experience.
Avoiding Latency
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
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
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.tech">
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
| Method | Pros | Cons |
| Autocomplete.js | • Plug-and-play • Built-in caching & analytics • Handles UI rendering |
• Less UI customization flexibility |
| Direct API | • 100% UI control • Integrating into native mobile apps |
• Must implement caching & analytics manually • Requires more development effort |