--- title: "Suggestions as you type in Hargapedia search" description: "Hargapedia's search box now suggests brands, categories, products and retailers as you type, with matching letters highlighted in the results." url: "https://rayson.me/writing/hargapedia-typeahead/" category: "Engineering" author: "Janarayson" published: 2019-12-10 --- Search in Hargapedia used to be fairly basic. You typed what you wanted, tapped Search and scrolled through the results. We'd added retailer suggestions back in [Hargapedia 2.0](/writing/hargapedia-2/), but if you were looking for a particular product, you still had to type out the name and run a search. Over the past few months, we've been changing that. Product suggestions arrived in September, followed by brands and categories in November. This week's update increases the number of suggested products from five to ten. The search box now does quite a bit more than it used to. Start typing "mil", for example, and you'll see matching brands, categories such as Baby Milk Powder, and products like Milo and Dutch Lady. You can go straight to what you're looking for without having to finish typing the name.
## What happens as you type Suggestions start appearing once you've entered at least three characters. The app doesn't immediately send a request for every letter. Instead, it waits 150 milliseconds after you stop typing before asking the server for suggestions. That reduces unnecessary requests while keeping the results responsive enough to appear almost immediately. The suggestions are arranged in four groups: brands, categories, products and retailers. Brands appear first as a row of logos. Categories and products follow, with the matching part of their names shown in bold. Retailers appear last. Each result takes you somewhere different. Tap a product and you go straight to its page. A brand opens a new screen showing all the products we track under that brand, while a retailer takes you to its brochures and Must Buy offers, as it did before. Categories use the same deep links as the rest of Hargapedia, so tapping one opens its category page just as it would from a banner or push notification. ## One request, three search indexes We've been using Algolia for product search since early 2018. For the new suggestions, I wanted to search more than just products without having to make a separate request for each type. Since September, the backend has been using a single Algolia request to search three indexes together: retailers, products and brands. We don't store complete product records in Algolia. The search returns the matching IDs, along with marked-up product names that identify which letters matched the query. The backend then uses those IDs to retrieve the full records from our own database cache. That keeps the Algolia indexes small, while letting the app receive the same product objects it already uses elsewhere. We don't need to maintain a separate version of each product just for search suggestions. The server also does some work before returning the results. Retailers are filtered to include only the ones that should be visible, then sorted alphabetically. Products retain Algolia's ranking, along with the marked-up names that the app uses to display the matching letters in bold. Brands without logos are filtered out in the app, since the brand suggestions are displayed entirely as a row of logos. ## Categories work a little differently Categories don't go through Algolia at all. Hargapedia already includes a copy of the category tree in the app, so I use that to find matching categories directly on the phone. As someone types, the app can look through the local categories without waiting for the server. That means category suggestions can appear before the brand, product and retailer results have come back. The final suggestion list combines both sources. Categories come from the app itself, while everything else comes from the backend. ## A few other search changes I'd also rebuilt the search bar in June, and in October I removed the Search button from the header. Pressing Return on the keyboard now does the same thing, so there was no need to keep a separate button at the top. I changed the progress indicator on iOS at the same time. The rest of the search screen still works as before. When the box is empty, you'll see your search history and recently viewed products. If nothing matches what you've typed, the app shows the familiar "We couldn't find what you're looking for" message. The search box still lets you run a full search, but now it can also take you directly to a product, brand, category or retailer before you've finished typing.