How to add a filter to your search autocomplete bar (pre search filter)

A pre-search filter is a filter (usually present on the side of the search bar) of certain categories that users can use to refine search before users perform a search.

For making such a UI, you can make use of Expertrec’s custom search engine.

For example, have a look at the below image that you might have seen on websites such as Amazon where you can search within electronics to make more refined searches.

Amazon would have a detailed categorization of products using which they might have easily created these categories. Content and other smaller websites might not have this categorization correct which could cause certain issues in creating a pre-search filter for their website.

Advantages of using a pre-search filter-

1. Users can restrict search queries even before a search is entered into the search bar.
2. Sites having a lot of categories can deliver an efficient search experience.

In this article, we will see

how to create a pre-search filter using Expertrec

1. Make sure you have created a custom search engine using Expertrec.
2. Go to UI customization-> Advanced-> search box-> Pre-search filter.
3. Select the categories you want to display in the pre-search filter using the drag and drop UI.
4. Click on save.
5. Refresh your demo page to see the pre-search filter added to your search bar.
6. Here is a demo that showcases the pre-search filter.

Add Search Filter to your search bar