How to build live search (autocomplete) in Webflow

In this tutorial, we're going to go through how to add Google like autocomplete functionality to your Webflow search field.

Search can be a powerful feature for any Webflow site that has content. If your site has some kind of directory or list, then adding search to it can make the user experience better.

When users can find what they’re looking for more quickly then they’re more likely to view your site more favourably and come back.

What is autocomplete?

Autocomplete is a technique used by search engines and other tools to highlight matching results before a user has completed their search.

You can totally customize this kind of search to make it look exactly how you like. Here's what we did for the Nocodelytics Help Center.

Why add autocomplete search to your Webflow site?

When you add autocomplete to your search fields, you can make finding content for your users better. What's more, to your users it feels like your site is up to date, the content is fresh and that it might be more relevant to their interests.

And if you add analytics (explained at the end), you can easily see what the most popular search terms are so you can get content ideas.

How to add autocomplete search to your Webflow site

Here’s an overview of how to add search with autocomplete in Webflow:

1. Set up your search field
2. Add your results element
3. Connect to Jetboost
4. Style the search and results element

Bonus step: Add analytics so you can track the most popular search terms.

Of course, building autocomplete in Webflow isn't going to be anywhere near as powerful as Google. What we're going to do is use the CMS as the basis for our search results and get a matching list of CMS items for the search term a user enters.

Before we get started with this tutorial, just note that you’ll need both a Webflow account and a Jetboost account to make this work. 

Also, you're welcome to implement this for your own site or you can use this cloneable by Soliudeen Ogunsola which we're using as the base for this tutorial. We won't be going into styles too much so you can customize this to make it look how you like.

Step 1: Set up search input field

If you're using the cloneable then you can skip this step (though you may want to increase the left padding on the input field).

To add the search field, in the Webflow Designer, select the Elements menu and add a form block to your page. Doing this adds a form block with two input labels, two input fields and a submit button.

You only need the one input field and button so you can remove everything else. Then click on the button and hide it as we won't need to press it to get autocomplete to work.

Now you have the input field ready for users to enter their search into, let's go ahead and add our search results element.

Step 2: Add your search results element

The search field is going to filter against items in a collection list, so you need to have at least one collection list in your CMS. If you don't have a collection list then you can create a sample one in the CMS for now.

Once your collection list is ready, go back into the Webflow Designer, select the Elements menu and choose the Collection List element. This will add a dynamic element and it allows you to connect it to the actual data in your CMS.

Click on the Collection List element and choose the list in your CMS that you want to use. Now inside this, find the Collection Item element and add a Div Block to it. Then inside the Div Block, add a Text Block and connect it to the data from your CMS that you want to filter in your results.

You can now style the results element whichever way you like so that it matches the look you're going for. See the styles used in this example.

If you want a search icon next to each result like in the example above, give the Div Block a display value of flex horizontal (found in the right hand side menu underneath Layout). Then inside the Div Block add an Image and set it to the icon that you want to use.

Step 3: Connect to Jetboost

At this point you have an input field for users to enter their search queries and a collections list element for users to see the results. To make the search actually work, you want to set up Jetboost's real-time search.

If you haven't already, sign up for a Jetboost account and follow the instructions to set up real-time search. You can use the video below to help you out!

‍

Step 4: Hide the search results and add highlighting

Once you've set up real-time search and have published your changes, you can test it on your site. You'll see that typing in the search will filter the collection list based on the letters or words you enter.

Show the list when the user is typing

Now we're going to style the results element so that it works like Google's search and only appears when a user is actually typing something.

Click on the Collection List wrapper (the same one that you added the Jetboost class to) and set the display value to hidden. Then, in the Jetboost settings for the real-time search you just created, click on the "Power Ups" option in the left hand side menu. Select "Search is active" from the list and underneath you'll see a new class that you should add to this Collection List wrapper.

So the way this works is the results element will be hidden by default but when the user is searching something, Jetboost will make the results visible.

Add highlighting

We're almost done! Now we're going to add some flare to the results by highlighting whatever the user has typed into the search. This makes it easier for the user to see how each result is relevant to what they're typing.

To do this, go into Jetboost's Power Ups again and select the "Search highlighting" option. When you scroll down, you'll get a bit of CSS but, actually, we're not going to use this as it's not the highlight effect we want.

Instead you'll want to copy the below CSS:

Paste it into your Webflow page's custom code section. You can find this in the Webflow Designer. First click on the Pages menu, then hover over the page where your search exists (eg Home) and you'll see a gear icon. Click on this and it will open up the page settings screen. Scroll down until you see Custom Code and you'll want to paste it into the first box which is the <head> section.

Once you've done that, you'll want to publish your site to see the changes reflected.

And that's how you add a Google style autocomplete feature to your Webflow site!

You could take this one step further by customizing the search field so that it blends into the results field when a user is typing. Or you can style it however you want so it matches with the rest of your site.

Bonus step: Add analytics

One useful thing you can also do is to use Nocodelytics to track what users are searching for on your Webflow site you can understand their needs better.

For example, if you see that they're searching for a specific piece of content but it isn't on your site, you can add it to your CMS so that future users can find this, making it more likely they stick around.

You can also pair that up with tracking which results are most popular so you can see which content resonates the most with your users.